微客导航 » 文章资讯 » vue实现拖拽效果

vue实现拖拽效果

2023-08-04 02:26:04 346

vue中实现拖拽效果，供大家参考，具体内容如下

首先要搞明白分清clientYpageYscreenYlayerYoffsetY的区别

作用3（事件对象中记录的鼠标位置）

语法解释

evt.screenX相对于屏幕的左上角为原点
evt.screenY

evt.clientX相对于浏览器的客户端左上角为原点（不计算滚动条位置）
evt.clientY

evt.pageX相对于浏览器的客户端左上角为原点（计算滚动条的位置）
evt.pageY

evt.offsetX以自己的左上角为原点
evt.offsetY

evt.pageY/evt.pageX相当于文档的左上角为原点，即包括被被隐藏的距离；

evt.clientY/evt.clientX相当于浏览器可视窗口的左上角为原点，即不包括被被隐藏的距离；

实现拖拽功能




{{positionX}}
{{positionY}}

//main.js letapp=newVue({ el:'#app', data:{ positionX:0, positionY:0, }, methods:{ move(e){ letodiv=e.target;//获取目标元素 //算出鼠标相对元素的位置 letdisX=e.clientX-odiv.offsetLeft; letdisY=e.clientY-odiv.offsetTop; document.onmousemove=(e)=>{//鼠标按下并移动的事件 //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置 letleft=e.clientX-disX; lettop=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; }; } }, computed:{}, });

当然，我们可以将它绑定为一个自定义指令，这样的话就可以用调用指令的形式来实现拖拽效果，下面是定义自定义指令的代码

在main.js中定义全局指令

Vue.directive('drag'
drag:{
//指令的定义
bind(el){
letodiv=el;//获取当前元素
oDiv.onmousedown=(e)=>{
//算出鼠标相对元素的位置
letdisX=e.clientX-odiv.offsetLeft;
letdisY=e.clientY-odiv.offsetTop;

document.onmousemove=(e)=>{
//用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
letleft=e.clientX-disX;
lettop=e.clientY-disY;

if(left<3){
left=0;
odiv.style.width="2px";
}else{odiv.style.width="auto";}
if(left>innerWidth-odiv.offsetWidth){left=innerWidth-odiv.offsetWidth;odiv.style.width="2px";}

//移动当前元素
odiv.style.left=left+'px';
odiv.style.top=top+'px';
};
document.onmouseup=(e)=>{
document.onmousemove=null;
document.onmouseup=null;
};
}
}
});

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

vue实现拖拽效果

热门推荐

随机推荐