使用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>