I am a little happy today. The csdn blog has more than 10,000 views. I have never had such a high number of views in the past. I have to say that I am still a bit pretentious too often, but I still can't help but be happy when I see these encouragement. At least, this makes me feel like a person in the industry. I am not alone.
Without further ado, continue today's recording, record the replay drag marks, and analyze it from the process:
1. To replay drag marks, you must first record them;
2. To record drag traces, dragging must be implemented;
This problem was done a few days ago, and it was slightly flawed at that time, but the general implementation method was clear, so today I realized this problem a lot faster. I was really happy. After realizing it again today, I understood it a little deeper, so I will record it today;
As for recording drag traces, this analysis will be short, after all, I have done it once:
1. Determine the current position and status of the div to ensure absolute can be used to drag;
2. Listen to mouse drag events (several mouse events summarized yesterday);
3. Make a corresponding response based on the corresponding mouse event and record the points where the div exists in the onmousemove drag and drop;
4. Listen to the mouse bounce event to end the drag event and point record
Anyway, let’s implement the following code first (all codes are listed here at the same time and analyzed one by one later):
html language:
<div id="showZone"></div>//This is still so familiar<a href="#" style="position: absolute;margin-top: 100px;color: yellow;background-color: red;">reback</a>//This is played back and forth
JavaScript part:
window.onload=function(){ var obj=document.getElementById("showZone"); var disX=disY=0; var dragIf=false; var position=[{x:obj.offsetLeft,y:obj.offsetTop}];//This is the key to implementing recording and playback, and the others are all obtaining basic elements var oa=document.getElementsByTagName("a")[0]; obj.onmousedown=function(event){ var event=event||window.event; disX=event.clientX-obj.offsetLeft;//The distance of the mouse to the div border disY=event.clientY-obj.offsetTop; dragIf=true;//The flag position.push({x:obj.offsetLeft,y:obj.offsetTop});//The record starts from this time return false; }; document.onmousemove=function(event){ if(!dragIf)return;//This judgment is extremely important, only the pressed movement can be valid var event=event||window.event; var NowX=event.clientX-disX;//According to the distance of the mouse recorded above to the div, you can know the distance of the div to the web page var nowY=event.clientY-disY; var maxX=document.documentElement.clientWidth-obj.offsetWidth;//This is offsetWidth, which is the width of the div, not offsetLeft var maxY=document.documentElement.clientHeight-obj.offsetHeight; nowX=nowX<0?0:nowX;//These judgments are just to judge that there is no boundary nowY=nowY<0?0:nowY; nowX=nowX>maxX?maxX:nowX; nowY=nowY>maxY?maxY:nowY; obj.style.marginTop=obj.style.marginLeft=0; obj.style.left=nowX+"px";//Don't forget + "px", only style.left/top is obj.style.style.top=nowY+"px" with "px"; position.push({x:nowX,y:nowY});//Record obj.innerHTML="X:"+nowX+"Y:"+nowY;//See changes intuitively return false; }; document.onmouseup=function(){ dragIf=false;//Drag and record obj.innerHTML="X:"+obj.offsetLeft+"Y:"+obj.offsetTop; }; oa.onclick = function (){ if (position.length == 1) return;//When there is only one, it means that the var timer is not moved. = setInterval(function (){ var oPos = position.pop(); oPos ? (obj.style.left = oPos.x + "px", obj.style.top = oPos.y + "px") : clearInterval(timer);//Another amazed by this writing}, 30); return false; }; };A few key points to pay attention to:
1. var position array, set of points: This point is the moving point in the upper left corner of the div, that is, the movement trajectory we record is actually the set of points in the upper left corner of the div, offsetLeft is the x coordinate, offsetTop is the y coordinate, you know how to draw this coordinate axis;
2. Several lengths or distances appearing in the program: offsetLeft, clientX, offsetWidth, style.left, document.documentElement.clientWidth, etc.;
3. Push() method: add elements to the end of the array, change the length of the array, and end;
4. pop() method: delete and return the last element of the array. There are two key points, one: return the last element; the other: delete the element, and the length of the array becomes smaller;
In this way, we have realized backward playback, so there is no need to mention the implementation principle. If we have direct playback, should we get and delete the first value of the array? Haha, try to write and read it.
I have to say that it is more comfortable to drag with the mouse. It is too inconvenient to move the keyboard. You can drag and drag with the mouse unscrupulously... The sky is already in a daze and it is going to be hot, but today is fine...