PC端:全局拖拽指令
//在main.js中添加如下代码:
Vue.directive('drag', { // 全局拖拽指令
bind: function (el, binding, vnode) {
let oDiv = el;
let self = vnode.context;
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;
if (!left && !top) {
oDiv.style.left = self.currentLeft;
oDiv.style.top = self.currentTop;
} else {
oDiv.style.left = left + "px";
oDiv.style.top = top + "px";
}
};
document.onmouseup = (e) => {
document.onmousemove = null;
document.onmouseup = null;
};
};
},
})
使用时在需要拖拽的元素上添加 v-drag 指令即可使用
注意点:此元素必须添加 position 定位
//使用示例
<div v-drag style="position: absolute;right: 100px;top: 100px;z-index: 999;width: 100px;height: 100px;background: red;">拖拽drag</div>
以上