vue 鼠标拖拽

<template>
<div class="home">
<div id="box" v-drag></div>
</div>
</template>

<script>
// @ is an alias to /src

export default {
name: "Home",
data() {return {}},
directives: {
drag: {
// 指令的定义
inserted: function(el) {
// el.drag();
console.log(el);
//获取元素
// var dv = document.getElementById("dv");
let x = 0;
let y = 0;
let l = 0;
let t = 0;
let isDown = false;
//鼠标按下事件
el.onmousedown = function(e) {
//获取x坐标和y坐标
x = e.clientX;
y = e.clientY;

//获取左部和顶部的偏移量
l = el.offsetLeft;
t = el.offsetTop;
//开关打开
isDown = true;
//设置样式
el.style.cursor = "move";
};
//鼠标移动
window.onmousemove = function(e) {
if (isDown == false) {
return;
}
//获取x和y
let nx = e.clientX;
let ny = e.clientY;
//计算移动后的左偏移量和顶部的偏移量
let nl = nx - (x - l);
let nt = ny - (y - t);

el.style.left = nl + "px";
el.style.top = nt + "px";
};
//鼠标抬起事件
el.onmouseup = function() {
//开关关闭
isDown = false;
el.style.cursor = "default";
};
}
}
}
};
</script>
<style lang="scss" scoped>
#box {
width: 60px;
height: 60px;
background-color: darkorange;
border-radius: 50%;
position: absolute;
//脱离文档流
}
</style>
————————————————
版权声明：本文为CSDN博主「魏同学.」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_47627529/article/details/106895565

标签：function,el,style,vue,鼠标,let,isDown,拖拽
来源： https://www.cnblogs.com/wsj1/p/16394160.html