亲测就在div绑定一个按下事件就行了在事件里面写另外两个事件另外两个绑上会莫名其妙卡死那种莫名其妙的问题

推荐几个开发调试时使用的第三方拖动插件吧虽然没用上但是他们是真的好vue-drag-resize和vuedraggable其中前者更轻量化后者功能更全

主要功能

refrangedivclassiconItemv-for(item,

index)

pointList:keyindexmousedown.stop.prevent.nativemousedown($event,

item):style{left:

item.zIndex,}!--mousemove.stop.prevent.nativemousemove($event,

item)mouseup.stop.prevent.nativemouseup($event,

item)--imgdraggablefalse:srctypeList[item.type].src:alttypeList[item.type].name

item.EName/span{{

odiv.offsetTop;document.onmousemove

(e)

{console.log(移动事件);//计算元素位置(需要判断临界值)let

left

{console.log(放开事件);document.onmousemove

null;item.zIndex

/scriptcss本来不该放出来但是我在这里踩坑了觉得其他人也会img图片有默认的拖拽很难禁止所以拿一个伪元素直接放在img上面不给点img就不会踩坑

.range

red;}}}完整代码建议按照上面的一点点复制吧有几个文件是外部的base64图片

templatediv

refrangedivclassiconItemv-for(item,

index)

pointList:keyindexmousedown.stop.prevent.nativemousedown($event,

item):style{left:

item.zIndex,}!--mousemove.stop.prevent.nativemousemove($event,

item)mouseup.stop.prevent.nativemouseup($event,

item)--imgdraggablefalse:srctypeList[item.type].src:alttypeList[item.type].name

item.EName/span{{

classrightbutton选择图片/buttonspan建议尺寸960*540/span/div/divdiv

classiconBtnFormdiv

classaddBtnbutton新增/button/div/div/divdiv

classiconListdiv

odiv.offsetTop;document.onmousemove

(e)

{console.log(移动事件);//计算元素位置(需要判断临界值)let

left

{console.log(放开事件);document.onmousemove

null;item.zIndex