1.vDrag.js
css
import Vue from "vue";
Vue.directive("Drag", (el) => {
const moveEl = el;
let flag = false;
const mouseDown = (e) => {
flag = true;
let X = e.clientX - el.offsetLeft
let Y = e.clientY - el.offsetTop
const move = (e) => {
if (flag) {
el.style.cursor = 'move';
el.style.marginLeft = '0px';
el.style.marginTop = '0px';
el.style.left = e.pageX - X + 'px';
el.style.top = e.pageY - Y + 'px';
}
}
document.addEventListener('mousemove', move);
document.addEventListener('mouseup', (e) => {
document.removeEventListener('mousemove', move);
});
}
moveEl.addEventListener('mousedown', mouseDown);
})
2.加上这两个属性内容
元素随意拖动
出现问题:出现鼠标mouseup事件监听bug,导致鼠标释放事件和元素和鼠标粘在一起
解决方法:
改为false即可解决问题