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>

关于vue.js自定义指令（拖拽、拖动、移动）指令v-drag的文章就介绍至此，更多相关vue.js自定义指令内容请搜索编程宝库以前的文章，希望以后支持编程宝库！

vue3官方文档defineProps和defineEmits都是只能在<script setup>中使用 ...