自己写一个小工具,使用js拖拽元素时,鼠标速度过快时 元素跟不上鼠标
看网上有人说把mousemove事件绑定到dom上 试了不管用
偶然发现拖拽文字丝毫无卡顿 不知道是不是元素比较复杂的缘故?
so 换个思路 需要拖拽元素时 不直接拖拽它 创建一个新元素 画出来边框 ,可以无卡顿拖拽。 拖拽完成后拿到这个临时元素的位置,将本体放过来即可
话不多说 上代码
html
<el-button @mousedown.native="beginMove" size="mini">按钮</el-button>
<div
id="innerHtml"
@mousemove="moveControl"
@mouseup="endMove"
></div>
JS
data() {
//这里存放数据
return {
leftShow: true,
is_move: false,
tempElement: null,
createElement: null
};
},
methods: {
/**
* 开始拖拽
* */
beginMove(e) {
this.is_move = true;
//隐藏页面上其他元素
this.leftShow = false;
//clone一个新元素出来 此为本体
this.createElement = e.target.cloneNode(true);
// 创建一个临时元素
this.tempElement = document.createElement("div");
this.tempElement.style.position = "absolute";
// 给它设置一个边框
this.tempElement.style.border = "1px dashed #fc6";
this.tempElement.style.width = e.target.offsetWidth + "px";
this.tempElement.style.height = e.target.offsetHeight + "px";
document.getElementById("innerHtml").append(this.tempElement);
},
/**
* 拖拽过程
* */
moveControl(e) {
if (this.is_move) {
this.tempElement.style.top =
e.clientY - this.tempElement.offsetHeight / 2 + "px";
this.tempElement.style.left =
e.clientX - this.tempElement.offsetWidth / 2 + "px";
}
},
/**
* 拖拽完成
* @param e
*/
endMove(e) {
this.is_move = false;
this.leftShow = true;
//设置本体的属性
this.createElement.style.position = "absolute";
//将临时元素的位置取到本体
this.createElement.style.top = this.tempElement.style.top;
this.createElement.style.left = this.tempElement.style.left;
document.getElementById("innerHtml").append(this.createElement);
//移除临时元素
this.tempElement.remove();
this.tempElement = null;
}
}