<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 值）
文章来源：https://www.toymoban.com/news/detail-515465.html
文章来源地址https://www.toymoban.com/news/detail-515465.html
到了这里，关于vue项目实现鼠标拖拽功能的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
