摘要：
总体代码如下：˂！
参考地址：基于Vue实现拖拽效果
参考链接中讲的比较详细，我只使用了其中自定义指令的方法。整体代码如下：
<template>
<!-- 卡片 -->
<div v-drag id="card">
</div>
</template>
<script>
export default {
data() {
return {
}
},
directives: {
drag: {
// 指令的定义
bind: function(el) {
let oDiv = el; // 获取当前元素
oDiv.onmousedown = (e) => {
// 算出鼠标相对元素的位置
let disX = e.clientX - oDiv.offsetLeft;
let disY = e.clientY - oDiv.offsetTop;
document.onmousemove = (e) => {
// 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
let left = e.clientX - disX;
let top = e.clientY - disY;
oDiv.style.left = left + 'px';
oDiv.style.top = top + 'px';
};
document.onmouseup = (e) => {
document.onmousemove = null;
document.onmouseup = null;
}
}
}
}
}
}
</script>
<style lang="scss">
.card {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
870px;
height: 510px;
background-color: #3ab5a0;
}
</style>使用方法：在需拖拽功能的元素上添加v-drag启用：
补充：阻止拖拽
上述方法利用自定义指令实现了弹窗的拖拽，补充部分是阻止拖拽，例如：弹窗中有input框，如果想要选中input中的内容就需要阻止弹窗的拖拽
参考地址：vue实现弹窗拖拽
export default {
directives: {
/*自定义拖拽*/
drag: {
inserted: function(el, binding, vnode) {
var odiv = el.parentNode;
odiv.onmousedown = function(eve) {
eve = eve || window.event;
var clientX = eve.clientX;
var clientY = eve.clientY;
var odivX = odiv.offsetLeft;
var odivY = odiv.offsetTop;
var odivLeft = clientX - odivX;
var odivTop = clientY - odivY;
var clientWidth = document.documentElement.clientWidth;
var oWidth = odiv.clientWidth;
var odivRight = clientWidth - oWidth;
var clientHeight = document.documentElement.clientHeight;
var oHeight = odiv.clientHeight;
var odivBottom = clientHeight - oHeight;
document.onmousemove = function(e) {
e.preventDefault();
var left = e.clientX - odivLeft;
if (left < 0) {
left = 0
}
if (left > odivRight) {
left = odivRight
}
var Top = e.clientY - odivTop;
if (Top < 0) {
Top = 0
}
if (Top > odivBottom) {
Top = odivBottom
}
odiv.style.left = left + "px";
odiv.style.top = Top + "px";
}
document.onmouseup = function() {
document.onmouseup = "";
document.onmousemove = "";
}
}
}
},
/*阻止拖拽*/
stopdrag: {
inserted: function(el, binding, vnode) {
let element = el;
element.onmousedown = function(e) {
e.stopPropagation()
}
}
}
}
}
使用方法：在不需拖拽的元素上添加v-stopdrag阻止：
