本文参考了 基于Vue实现拖拽效果 最终实现，按原文中代码实现，发现有bug，在鼠标按下，拖动时，难以正常拖动。贴出原文代码
directives: { drag: { // 指令的定义 bind: function (el) { let odiv = el; //获取当前元素 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; //绑定元素位置到positionX和positionY上面 this.positionX = top; this.positionY = left; //移动当前元素 odiv.style.left = left + 'px'; odiv.style.top = top + 'px'; }; document.onmouseup = (e) => { document.onmousemove = null; document.onmouseup = null; }; }; } } }原文代码是有问题的，在鼠标按下，拖动时，难以正常拖动，并且提前触发了mouseup事件，导致mousemove并未解绑，此时手指已经离开鼠标，还能正常拖动。经一些调整，在mousemove中加入“return false”，解决不能正常拖动的问题，将mouseup触发的事件做个setTimeout延迟处理，就可以正常触发mouseup事件，最终正常拖动和释放了。while是用来限制大长图不出边界的。直接贴出修改后的代码：
directives: { drag: { // 指令的定义 bind: function (el) { let odiv = el; //获取当前元素 let that = this; odiv.onmousedown = (e) => { //算出鼠标相对元素的位置 let disX = e.clientX - odiv.offsetLeft; odiv.onmousemove = (e)=>{ //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置 let left = e.clientX-disX; //移动当前元素
odiv.style.left = left + 'px'; while (parseInt(odiv.style.left)>0){ odiv.style.left = parseInt(odiv.style.left)-1+'px'; } while (parseInt(odiv.style.left)<-4945){ odiv.style.left = parseInt(odiv.style.left)+1+'px'; } return false; }; odiv.onmouseup = (e) => { setTimeout(function () { odiv.onmousemove = null; odiv.onmouseup = null; },100) }; }; } } }