主要思想: 获取拖拽的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-自定义指令-拖拽 */
Vue.directive('drag',function(){
var oDiv=this.el;
oDiv.onmousedown=function(ev){
var disX=ev.clientX-oDiv.offsetLeft;
var disY=ev.clientY-oDiv.offsetTop;
document.onmousemove=function(ev){
var l=ev.clientX-disX;
var t=ev.clientY-disY;
oDiv.style.left=l+'px';
oDiv.style.top=t+'px';
};
document.onmouseup=function(){
document.onmousemove=null;
document.onmouseup=null;
};
};
});
const app = new Vue({
el: '#app'
})
html中:
<body>
<div id="app">
<div v-drag :style="{ width:'100px', height:'100px', background:'blue', position:'absolute', right:0, top:0}"></div>
<div v-drag :style=" {width:'100px', height:'100px', background:'red', position:'absolute', left:0, top:0}"></div>
</div>
</body>
原文链接:https://blog.csdn.net/u013217071/article/details/73465402
博主:「秋天1014童话」