Vue.js如何实现悬浮窗拖动

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。 本文链接：https://blog.csdn.net/weixin_39531576/article/details/99678371

h5 代码模块

内容1

内容2

js模块自己写一个自定义制定directives
drag: function(el) {
var that=this;
let dragBox = el; //获取当前元素
dragBox.onmousedown = e => {
sessionStorage.setItem(‘move’,‘startmove’)
//计算鼠标相对元素的位置
let disX = e.clientX - dragBox.offsetLeft;
let disY = e.clientY - dragBox.offsetTop;
document.onmousemove = e => {
sessionStorage.setItem(‘move’,‘move’)
document.getElementById(‘drag_box’).style.cursor=‘move’
//用鼠标的位置减去鼠标相对元素的位置，得到元素的位置2
let left = e.clientX - disX;
let top = e.clientY - disY;
if(top>document.body.scrollHeight-100){
top=document.body.scrollHeight-96
}
if(left>document.documentElement.clientWidth-231){
left=document.documentElement.clientWidth-218
}
if(left<0){
left=0
}
if(top<0){
top=0
}
//移动当前元素
dragBox.style.left = left + “px”;
dragBox.style.top = top + “px”;
};
document.onmouseup = e => {
document.getElementById(‘drag_box’).style.cursor=‘pointer’
//鼠标弹起来的时候不再移动
document.onmousemove = null;
//组织鼠标松开还会移动
document.onmouseup = null;
};
};
}
css模块
.drag_box {
z-index: 10000;
bottom: 0px;
right: 0px;
width: 216px;
height: 94px;
background: #FFFFFF;
position: absolute;
cursor: pointer;
box-sizing: border-box;
border-radius:12px;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 6px 12px 6px rgba(0,0,0,0.12);

}
.drag_box li{
height: 100%;
flex-grow: 1;
text-align: center;
list-style: none;
display: flex;
justify-content: center;
align-items: center;
}
.drag_box span{
position: relative;
top: 12px;
font-family: “microsoft yahei”;
font-size: 20px;
color: #666666;
letter-spacing: 0;
text-align: center;
line-height: 20px;
}
效果如下图，本人把图片去掉了，有需要的依样画葫芦即可，好了，差不多功能到这里，有不懂的可以下面留言