1.拖动需要监听鼠标按下、移动、抬起事件
2.一开始全部用methods绑定方法,后面发现用自定义指令directives比较方便,不用声明在data里声明变量,以及一个一个的绑定事件
<template>
<div class="ad" v-drag>
<el-badge :value="1" class="item">
<i class="el-icon-chat-line-round icon"></i>
</el-badge>
</div>
</template>
<script>
export default {
name: "AD",
directives: {
drag: {
inserted(el) {
let [x, y, l, t, isDown] = [0, 0, 0, 0, false];
el.onmousedown = (e) => {
//获取x坐标和y坐标
x = e.clientX;
y = e.clientY;
//获取左部和顶部的偏移量
l = el.offsetLeft;
t = el.offsetTop;
//开关打开
isDown = true;
//设置样式
el.style.cursor = "move";
};
//鼠标移动
el.onmousemove = (e) => {
if (isDown == false) return;
//获取x和y
let [nx, ny] = [e.clientX, e.clientY];
//计算移动后的左偏移量和顶部的偏移量
let nl = nx - (x - l);
let nt = ny - (y - t);
el.style.left = nl + "px";
el.style.top = nt + "px";
};
//鼠标抬起事件
el.onmouseup = () => {
//开关关闭
isDown = false;
el.style.cursor = "default";
};
},
},
},
};
</script>
<style>
.icon {
font-size: 40px;
}
.ad {
position: fixed;
right: 20px;
bottom: 30%;
z-index: 9999999;
}
</style>