This will also happen if a page structure is very complex or if the computer configuration is not good. In order to understand the reason for the slowdown, we did several demo comparisons and finally found that adding a timer to the mousemove event can improve the experience.
The key to the entire code is the timer that starts when the mouse is pressed, so that the Onmousemove event will be executed every 30ms, and then the timer will be cleared when the mouse is released.
timer=setInterval(function(){flag=true;},30);
This can reduce the burden on the browser to draw the div layer, so that it does not have to be drawn every time when dragging When moving, it is actually too short for the human eye to detect changes. The delay interval can be set by yourself based on your experience.
function Endrag(source,target){
source =typeof(source)=="object" ? source:document.getElementById(source);
target=typeof(target)=="object" ? target:document.getElementById(target);
var x0= 0,y0=0,x1=0,y1=0,moveable=false,index=100;
var timer,flag=false;
var i=0;
source.onmousedown=function(e ){
e = e ? e : (window.event ? window.event : null);
x0 = e.clientX ;
y0 = e.clientY ;
x1 = isNaN(parseInt( source.style.left))?0:parseInt(source.style.left);
y1 = isNaN(parseInt(source.style.top))?0:parseInt(source.style.top);
moveable = true;
//When the mouse is pressed, the timer starts working and executes the mousemove event every 50ms
timer=setInterval(function(){flag=true;},30);
};
//Drag;
source.onmousemove=function(e){
e = e ? e : (window.event ? window.event : null);
if(moveable) {
if(flag){
i ;
flag=false;
target.style.left = (e.clientX x1 - x0 ) "px";
target.style.top = (e.clientY y1 - y0 ) "px";
}
}
};
//Stop dragging;
source.onmouseup=function (e){
if(moveable) {
moveable = false;
clearInterval(timer);
//alert(i);
}
};
//stop dragging;
source.onmouseout=function (e){
if(moveable) {
moveable = false;
clearInterval(timer);
//alert(i);
}
};
}
Statement:The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn