<body>
<div id="app">
<!-- 自定义的指令在使用时需添加v-前缀 -->
<div v-drag="123" id="box">helloworld</div>
<p v-drag>段落</p>
</div>
</body>
<script src="vue.js"></script>
<script>
// Vue.directive，用于全局注册一个指令，第一个参数是指令名字，第二个参数是指令的配置对象
Vue.directive("drag",{
// 指令配置对象中inserted方法，当指令被插入到元素中时指令，一般用于设置指令的具体功能。
// inserted函数中，第一个参数是指令所在的元素对象，第二个参数是指令信息。
inserted(el,dir){
// console.log(el);
el.style.position = "relative";
el.style.left = "0px";
el.style.top = "0px";
// console.log("指令被识别了");
function mv(e){
let offX = e.pageX - prevX;
let offY = e.pageY - prevY;
el.style.left = parseInt(el.style.left)+offX+"px";
el.style.top = parseInt(el.style.top)+offY+"px";
prevX = e.pageX;
prevY = e.pageY;
}
let prevX = 0;
let prevY = 0;
el.addEventListener("mousedown",function(e){
prevX = e.pageX;
prevY = e.pageY;
document.addEventListener("mousemove",mv)
})
document.addEventListener("mouseup",function(){
document.removeEventListener("mousemove",mv);
});
}
})
new Vue({
el:"#app",
data:{
}
})
</script>