今天參照網上別人的博客,實作了di的拖動效果,主要使用了window的onmousemove屬性來實作定位,然后修改需要移動元素的絕對定位位置,但是最后使用起來發現拖拽很卡頓,主要是拖快了,滑鼠脫離目標元素后元素跟隨滑鼠效果消失,元素停止運動,體驗感并不好,看了很多解決方案都沒有解決問題,最后通過除錯很簡單的解決了問題,現在和大家分享下,方便大家以后避坑...
代碼:
//div拖拽
export function divMove(that, childId, ParentId, e) {
//加鎖,防止拖拽不順暢
if (that.lock) {
return;
}
//設定訊息框可拖動
let title = document.getElementById(childId);
let main = document.getElementById(ParentId);
//定義控制移動變數
let isStartMove = false;
let x = 0;
let y = 0;
let l = 0;
let t = 0;
title.onmousedown = (e) => {
that.lock = true;
let event = e || window.event;
isStartMove = true;
title.style.cursor = 'move';
x = event.clientX;
y = event.clientY;
l = main.offsetLeft
t = main.offsetTop;
}
window.onmousemove = (e) => {
if (!isStartMove) {
return;
}
var event = e || window.event;
let ln = event.clientX - (x - l);
let tn = event.clientY - (y - t);
main.style.left = ln + 'px';
main.style.top = tn + 'px';
}
title.onmouseup = () => {
that.lock = false;
isStartMove = false;
title.style.cursor = 'default';
}
};
上面抽離出了一個方法,使用場景是頁面上多個地方需要通過拖拽子元素來改變整個父元素的位置, 上面給元素初始化拖拽的方法是通過目標元素的onMouseEnter事件觸發,通過除錯代碼發現當滑鼠按下左鍵拖拽較快脫離目標元素時,不知道為什么又會觸發onMouseEnter事件,導致在左鍵按下的狀態第二次觸發onMouseEnter時將是否跟隨滑鼠的狀態變數isStartMove置為了false,所以tuo拖拽停止
找到問題原因,就可以很簡單的解決問題了,在類組件里設定全域開關this.lock,默認false,當滑鼠按下置為true,收起是再還原false,相當于給拖拽事件加了一把鎖,當一個拖拽事件沒有完成時,不允許再次初始化,這樣即解決了單個元素拖拽卡頓問題,也解決了不同元素之間的干擾,現在拖拽非常順暢,好用
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/23598.html
標籤：JavaScript
上一篇：關于bootstraptable使用x-editable控制元件的select2型別問題
下一篇：完美解決div拖拽卡頓問題