export default {
data() {
return {}
},
methods: {
mousedown(e) {
// 被移动的主体 mainDiv
const mainDiv = document.querySelector('.vvhan-com')
// 鼠标点击位置与主体边的距离
const distanceX = e.clientX - mainDiv.offsetLeft
const distanceY = e.clientY - mainDiv.offsetTop
// 鼠标移动事件
document.onmousemove = function (ev) {
const _e = ev || e
//移动时,鼠标距离当前窗口x轴坐标 - 鼠标在拖拽元素的坐标 = 剩下距离body的x轴坐标
//将这个数值设置为拖拽元素的left、top
let BoxLeft = _e.clientX - distanceX;
let BoxTop = _e.clientY - distanceY;
//获取body的页面可视宽高
const clientHeight = document.documentElement.clientHeight || document.body.clientHeight
const clientWidth = document.documentElement.clientWidth || document.body.clientWidth
//限制拖拽宽高
BoxLeft = BoxLeft < 0 ? 0 : BoxLeft > clientWidth - mainDiv.offsetWidth ? clientWidth - mainDiv
.offsetWidth : BoxLeft
BoxTop = BoxTop < 0 ? 0 : BoxTop > clientHeight - mainDiv.offsetHeight ? clientHeight - mainDiv
.offsetHeight : BoxTop
mainDiv.style.top = BoxTop + 'px'
mainDiv.style.left = BoxLeft + 'px'
}
// 鼠标松开事件 结束拖拽
document.onmouseup = function () {
document.onmousemove = null
document.onmouseup = null
}
}
}
}
body {
position: relative !important;
background: url('https://static.4ce.cn/ipfs/QmQtvCE2DMkYJKWicdaJxh3Vh47ca6t25RxBGrbre5Cy2p');
background-size: cover;
padding: 0;
margin: 0;
}
.vvhan-com {
user-select: none;
position: absolute !important;
Box-sizing: border-Box;
padding: 6px;
top: 36px;
right: 36px;
Box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
background-color: rgba(255, 255, 255, 0.2);
width: 340px;
z-index: 9;
font-size: 14px;
.title {
margin-bottom: 6px;
font-size: 16px;
line-height: 28px;
border-bottom: 1px rgba(0, 0, 0, .1) solid;
cursor: move;
}
h1 {
color: #000;
}
}
原文地址:https://cloud.tencent.com/developer/article/2013012
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。