vue 实现文本的拖拽_基于Vue实现拖拽效果及阻止拖拽

参考链接中讲的比较详细，我只使用了其中自定义指令的方法。整体代码如下：

data() {return{

}

},

directives: {

drag: {//指令的定义

bind: function(el) {

let oDiv= el; //获取当前元素

oDiv.onmousedown = (e) =>{//算出鼠标相对元素的位置

let disX = e.clientX -oDiv.offsetLeft;

let disY= e.clientY -oDiv.offsetTop;

document.οnmοusemοve= (e) =>{//用鼠标的位置减去鼠标相对元素的位置，得到元素的位置

let left = e.clientX -disX;

let top= e.clientY -disY;

oDiv.style.left= left + 'px';

oDiv.style.top= top + 'px';

};

document.οnmοuseup= (e) =>{

document.οnmοusemοve= null;

document.οnmοuseup= null;

}

}

}

}

}

}

position: absolute;

top:50%;

left:5