vue.js 自定义指令（拖拽、拖动、移动） 指令 v-drag详解

1.main.js文件中添加已下代码

Vue.directive('drag', {
 //1.指令绑定到元素上回立刻执行bind函数，只执行一次
 //2.每个函数中第一个参数永远是el，表示绑定指令的元素，el参数是原生js对象
 //3.通过el.focus()是无法获取焦点的，因为只有插入DOM后才生效
 bind: function (el) { },
 //inserted表示一个元素，插入到DOM中会执行inserted函数，只触发一次
 inserted: function (el) {
   let odiv = el; //获取当前元素
   let firstTime = '', lastTime = '';
   el.onmousedown = function (e) {
     var disx = e.pageX - el.offsetLeft;
     var disy = e.pageY - el.offsetTop;
     // 给当前元素添加属性，用于元素状态的判断
     odiv.setAttribute('ele-flag', false)
     odiv.setAttribute('draging-flag', true)
     firstTime = new Date().getTime();
     document.onmousemove = function (e) {
       el.style.left = e.pageX - disx + 'px';
       el.style.top = e.pageY - disy + 'px';
     }
     document.onmouseup = function (event) {
       document.onmousemove = document.onmouseup = null;
       lastTime = new Date().getTime();
       if ((lastTime - firstTime) > 200) {
         odiv.setAttribute('ele-flag', true)
         event.stopPropagation()
       }
       setTimeout(function () {
         odiv.setAttribute('draging-flag', false)
       }, 100)
     }
   }
 }
})

2.组件中的使用

<template>
<div class="drag" v-drag @click="handleDragClick"> 我是拖拽的div<div>
<template>
<script>

methods:{
 handleDragClick(e){
 // 判断拖拽组件的状态
let isDrag = false;
try {
     isDrag = e.target.getAttribute('ele-flag') === 'true';
}catch (e) {
}
if(isDrag){
return;
    }
// 当推拽组件未在 拖动状态 执行点击事件
// todo 下面是执行点击事件的代码
  }
}
</script>
<style>
// 这里是拖拽 组件的样式
.drag{
 width:100px;
 height:100px;
 border:1px solid pink;
}
</style>

补充：vue自定义拖拽指令v-drag

<template>
 <div class="drag" v-drag ref="drag"></div>
</template>

<script>
export default {
 name: 'Home',
 data(){
   return{
     positionX:'',
     positionY:''
   }
 },
 mounted () {
   this.$refs.drag.style.top = window.localStorage.getItem('top')+'px'
   this.$refs.drag.style.left = window.localStorage.getItem('left')+'px'
 },
 directives: {
   drag: {
     // 指令的定义
     bind: function (el,binding,vnode) {
       console.log(el);
       console.log(binding);
       console.log(vnode.context);
       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;

//绑定元素位置到positionX和positionY上面
           vnode.context.positionX = top;
           vnode.context.positionY = left;

window.localStorage.setItem('top',top)
           window.localStorage.setItem('left',left)

//移动当前元素
           odiv.style.left = left + 'px';
           odiv.style.top = top + 'px';
         };
         document.onmouseup = () => {
           document.onmousemove = null;
           document.onmouseup = null;
         };
       };
     }
   }
 }
}
</script>
<style lang="scss" scoped>
.drag{
 position: relative;   /*定位*/
 // top: 10px;
 // left: 10px;
 width: 200px;
 height: 200px;
 background: #666;    /*设置一下背景*/
}
</style>

来源：https://blog.csdn.net/qq_37237495/article/details/104689452