拖拽

*{

margin: 0;

padding: 0;

}

#box{

background: red;

width: 100px;

height: 100px;

position: absolute;

}

Vue.directive("drag",(el,{modifiers,value})=>{

let{l,t}=modifiers;

el.addEventListener("mousedown",handleDownCb)

let disX,disY;

function handleDownCb(e){

disX=e.offsetX;

disY=e.offsetY;

document.addEventListener("mousemove",handleMoveCb);

document.addEventListener("mouseup",handleUpCb);

}

function handleMoveCb(e){

let x=e.clientX-disX;

let y=e.clientY-disY;

if((l&&t) && value){

el.style.left=x+"px";

el.style.top=y+"px";

return;

}

if(l&&value){

el.style.left=x+"px";

return;

}

if(t&&value){

el.style.top=y+"px";

return;

}

}

function handleUpCb(){

document.removeEventListener("mousemove",handleMoveCb);

document.removeEventListener("mouseup",handleUpCb);

}

})

let vm=new Vue({

el:"#app",

data:{

flag:true

}

})