可以在组件上设置指令也可以设置全局指令
目标
1、移动元素并保存位置信息
主要用到 onmousedown onmousemove onmouseup
在组件中设置指令
代码语言：javascript复制 directives: {
drag: {
inserted(el, binding) {
let oDiv = el;
oDiv.onmousedown = function (e) {
// 鼠标按下，计算当前元素距离可视区的距离
let disX = e.clientX - oDiv.offsetLeft;
let disY = e.clientY - oDiv.offsetTop;
document.onmousemove = function (e) {
// 获取到鼠标拖拽后的横向位移(距离父级元素)
let l = e.clientX - disX;
// 获取到鼠标拖拽后的纵向位移(距离父级元素)
let t = e.clientY - disY;
oDiv.style.left = l "px";
oDiv.style.top = t "px";
if (e.clientX - disX <= 0) {
oDiv.style.left = 0 "px";
}
if (e.clientY - disY <= 0) {
oDiv.style.top = 0 "px";
}
// 将此时的位置传出去
binding.value({
id: oDiv.id,
left: oDiv.style.left,
top: oDiv.style.top,
});
};
// 松开事件后，移除事件
document.onmouseup = function (e) {
document.onmousemove = null;
document.onmouseup = null;
};
};
},
},
},使用方法 v-drag="greet"
代码语言：javascript复制 <div style="width:400px;height:400px;position:relative;background:pink;">
<div v-drag="greet" id="001"
style="width:100px;height:100px;background:gray;position:absolute;left:0;top:0;">
<div>第一行</div>
<div>第二行</div>
</div>
<div v-drag="greet" id="002"
style="width:100px;height:100px;background:gray;position:absolute;left:120px;top:0;">
<div>2-第一行</div>
<div>2-第二行</div>
</div>
<!-- <input v-focus> -->
</div>保存数据，因为拖动的时候是不停的执行greet函数，为了性能，采用了防抖
代码语言：javascript复制 greet(obj) {
console.log(obj);
clearTimeout(this.timer);
this.timer = setTimeout(() => {
console.log("setTimeout");
if (this.positionInfor.length == 0) {
console.log("等于0");
this.positionInfor.push(obj);
} else {
for (let i = 0; i < this.positionInfor.length; i ) {
if (this.positionInfor[i].id == obj.id) {
this.positionInfor.splice(i,1,obj)
return;
}
if (i == this.positionInfor.length - 1) {
this.positionInfor.push(obj);
}
}
}
}, 300);
},
