今天用vue+原生js的mousemove事件,写了个拖动,发现只能慢慢拖动才行,鼠标只要移动快了,就失效,不能拖动了;
搞了半天在,总算解决了,但是问题的深层原理还没搞清楚,知道的大侠可以留言分享,下面直接上代码:
只能慢速拖动的代码:
{{ site.name }}{{ index }} : {{ site.name }}
可以快速拖动的代码:
{{ site.name }}{{ index }} : {{ site.name }}
补充:vue 自定义指令-拖拽
主要思想: 获取拖拽的dom元素,在oDiv.onmousedown事件内获取鼠标相对dom元素本身的位置:
var disX=ev.clientX-oDiv.offsetLeft; var disY=ev.clientY-oDiv.offsetTop;
再通过document.onmousemove事件计算dom元素左上角相对 视口的距离:
var l=ev.clientX-disX; var t=ev.clientY-disY; oDiv.style.left=l+'px'; oDiv.style.top=t+'px';
完整代码:
总结
以上所述是小编给大家介绍的vue+mousemove实现鼠标拖动功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!