使用vue自定义指令directive写一个div移动指令
1、在src/utils目录创建drag.js文件。在注册指令名称时不需要‘v-’；
import Vue from 'vue'Vue.directive('drag', {bind(el,binding){// 鼠标是否按下let dragging = false;// 鼠标距离当前元素的x轴向距离let offsetX = 0;// 鼠标距离当前元素的y轴距离let offsetY = 0;// drag样式let dratStyle = {left: 0,top: 0,}// 鼠标按钮下el.onmousedown = function (e){dragging = true;offsetX = e.pageX - dratStyle.left; // 结果是鼠标距离元素的x轴位置offsetY = e.pageY - dratStyle.top; // 结果是鼠标距离元素的y轴位置}// 鼠标抬起el.onmouseup = function(e){dragging = false;}// 鼠标移动document.onmousemove = function(e){if (dragging){dratStyle.left = e.pageX - offsetX;dratStyle.top = e.pageY - offsetY;el.style.left = dratStyle.left + 'px';el.style.top = dratStyle.top + 'px';}}}
})2、在min.js里引入指令
import '@/utils/drag.js'
3、在组件中使用
<div class="drag" v-drag><div class="header">拖拽框</div>
</div>
)
