1、创建directive.js文件
import Vue from "vue";
Vue.directive("drag", {
bind: function (el) {
let odiv = el;
odiv.style.position = "fixed";
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;
odiv.style.left = left + "px";
odiv.style.top = top + "px";
};
document.onmouseup = () => {
document.onmousemove = null;
document.onmouseup = null;
};
};
},
});
2、main.js中引入
import "./Directive/directives";
3、组件中使用v-drag指令
<div class="map-popup-box" v-drag></div>