今天参照网上别人的博客,实现了di的拖动效果,主要使用了window的onmousemove属性来实现定位,然后修改需要移动元素的绝对定位位置,但是最后使用起来发现拖拽很卡顿,主要是拖快了,鼠标脱离目标元素后元素跟随鼠标效果消失,元素停止运动,体验感并不好,看了很多解决方案都没有解决问题,最后通过调试很简单的解决了问题,现在和大家分享下,方便大家以后避坑...
代码:
//div拖拽
exportfunctiondivMove(that,childId,ParentId,e){
//加锁,防止拖拽不顺畅
if(that.lock){
return;
}
//设置消息框可拖动
lettitle=document.getElementById(childId);
letmain=document.getElementById(ParentId);
//定义控制移动变量
letisStartMove=false;
letx=0;
lety=0;
letl=0;
lett=0;
title.onmousedown=(e)=>{
that.lock=true;
letevent=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;
}
varevent=e||window.event;
letln=event.clientX-(x-l);
lettn=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,相当于给拖拽事件加了一把锁,当一个拖拽事件没有完成时,不允许再次初始化,这样即解决了单个元素拖拽卡顿问题,也解决了不同元素之间的干扰,现在拖拽非常顺畅,好用
分 --> |
