vue拖拽事件
1最外面的div给一个class="drag"2把需要拖拽的模块用<div class="drag-box" v-drag draggable="false"></div>包起来3.directives: {drag(el){let oDiv = el; //当前元素//禁止选择网页上的文字document.onselectstart...
·
1
最外面的div 给一个
class="drag"
2
把需要拖拽的模块用<div class="drag-box" v-drag draggable="false"></div>
包起来
3.
directives: {
drag(el){
let oDiv = el; //当前元素
//禁止选择网页上的文字
document.onselectstart = function() {
return false;
};
oDiv.onmousedown = function(e){
//鼠标按下,计算当前元素距离可视区的距离
let disX = e.clientX - oDiv.offsetLeft;
let disY = e.clientY - oDiv.offsetTop;
document.onmousemove = function(e){
//计算移动的距离
let l = e.clientX - disX;
let t = e.clientY - disY;
//移动当前元素
oDiv.style.left = l + "px";
oDiv.style.top = t + "px";
}
document.onmouseup = function(e){
document.onmousemove = null;
document.onmouseup = null;
};
//防止onmouseup失效
return false;
};
}
},
4
.drag{
position: relative;
}
.drag-box{
position:absolute;
cursor: pointer;
}
更多推荐
已为社区贡献1条内容
所有评论(0)