vue项目实现鼠标拖拽功能
<divid="back"@mousedown="draggableFun($event)">// 返回按钮点击事件const goBack = () => {store.showDetail = false;};// 鼠标拖拽事件const draggableFun = (val) => {var div = document.getElementById("back")
·
<div
id="back"
@mousedown="draggableFun($event)"
></div>
//e.clientX和e.clientY 相对于浏览器可视区的位置
//元素.offsetLeft\ 元素.offsetTop 获取元素、节点位置 参照已定位的祖先元素的位置,
//当所有祖先都未定位则参照 body 元素
//原理:鼠标移动前后相对于浏览器可视区的位置的差值+元素相对于已定位的祖先元素的位置
// 鼠标拖拽事件
const draggableFun = (val) => {
let div = document.getElementById("back");
let dragFlag = false;
let x, y;
div.onmousedown = function (e) {
dragFlag = true;
e = e || window.event;
// 获取鼠标在元素上的位置(鼠标按下时在元素上得位置)
x = e.clientX - div.offsetLeft;
y = e.clientY - div.offsetTop;
};
div.onmousemove = function (e) {
if (dragFlag) {
e = e || window.event;
div.style.left = e.clientX - x + "px";
div.style.top = e.clientY - y + "px";
}
};
// 鼠标抬起事件
div.onmouseup = function (e) {
dragFlag = false;
};
};
当鼠标按下鼠标移动的时候,记录移动中的 x、y 值,那么这个被拖拽的 dom 的 top 和
left 值就是:
top=鼠标按下时记录的 dom 的 top 值+(移动中的 y 值 - 鼠标按下时的 y 值)
left=鼠标按下时记录的 dom 的 left 值+(移动中的 x 值 - 鼠标按下时的 x 值)
更多推荐
已为社区贡献6条内容
所有评论(0)