js implements playback drag and drop trajectory analysis from the process_javascript skills

I am a little happy today. The csdn blog has over 10,000 views. I have never had such a high number of views in the past. I have to say that it is still a bit pretentious too often, but I can’t help but be happy to see these encouragements. Ah, at least, this gives me the feeling of being an insider, and I am not alone.

Without further ado, let’s continue today’s recording, record the playback drag traces, and analyze the process first:

1. To play back drag traces, you must first record;

2. To record drag traces, drag must be implemented;

This problem has been solved a few days ago, and the implementation was slightly flawed, but the general implementation method is already clear, so today the speed of implementing this problem is much faster, and I am really happy. Now, after implementing it again today, my understanding is a little deeper, so I will record it again today;

As for recording drag traces, this analysis will be a long story short. After all, it has been done once:

1. Determine the position and status of the current div to ensure absolute dragging;

2. Monitor mouse drag events (several mouse events summarized yesterday);

3. Make corresponding responses according to the corresponding mouse events, and record the existing points of the div during onmousemove dragging;

4. Monitor the mouse bounce event to end the recording of drag events and points

Let’s implement the code first (all codes are listed here at the same time, and analyzed one by one later):

html language:

<div style="width: 50px;height: 50px;background-color: cyan;display: block;position: absolute;" id="showZone"></div>//这个还是那么熟悉啊 
<a href="#" style="position: absolute;margin-top: 100px;color: yellow;background-color: red;">reback</a>//这个是来回放的

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}];//这个是实现记录和回放的关键，其它都是基本元素的获取 
var oa=document.getElementsByTagName("a")[0]; 

obj.onmousedown=function(event){ 
var event=event||window.event; 
disX=event.clientX-obj.offsetLeft;//鼠标相对于div边框的距离 
disY=event.clientY-obj.offsetTop; 
dragIf=true;//可以进行拖拽的标志 

position.push({x:obj.offsetLeft,y:obj.offsetTop});//记录从这时候就开始了 
return false; 
}; 
document.onmousemove=function(event){ 

if(!dragIf)return;//这个判断极为重要，只有按下的移动才有效 
var event=event||window.event; 
var nowX=event.clientX-disX;//根据上面记录的鼠标相对div的距离就知道div相对网页的距离了吧 
var nowY=event.clientY-disY; 
var maxX=document.documentElement.clientWidth-obj.offsetWidth;//这里是offsetWidth，是div的宽度，不是offsetLeft 
var maxY=document.documentElement.clientHeight-obj.offsetHeight; 
nowX=nowX<0&#63;0:nowX;//这些判定，只是判断不要出了边界 
nowY=nowY<0&#63;0:nowY; 
nowX=nowX>maxX&#63;maxX:nowX; 
nowY=nowY>maxY&#63;maxY:nowY; 

obj.style.marginTop=obj.style.marginLeft=0; 
obj.style.left=nowX+"px";//不要忘记+“px”，只有style.left/top是有“px”的 
obj.style.top=nowY+"px"; 
position.push({x:nowX,y:nowY});//不停记录啊 
obj.innerHTML="X:"+nowX+"Y:"+nowY;//直观的看到变化 
return false; 
}; 
document.onmouseup=function(){ 
dragIf=false;//不允许再进行拖拽和记录了 
obj.innerHTML="X:"+obj.offsetLeft+"Y:"+obj.offsetTop; 
}; 
oa.onclick = function (){ 
if (position.length == 1) return;//只有一个的时候，说明并未移动 
var timer = setInterval(function (){ 
var oPos = position.pop(); 
oPos &#63; (obj.style.left = oPos.x + "px", obj.style.top = oPos.y + "px") : clearInterval(timer);//又被这个写法惊艳到 
}, 30); 
return false; 
}; 
};

A brief summary of the key points that need attention:

1. Var position array, a collection of points: This point is the moving point of the upper left corner of the div. That is to say, the movement track we record is actually a collection of points in the upper left corner of the div. OffsetLeft is the x coordinate. offsetTop is the y coordinate. Do you know how to draw this coordinate axis?

2. Several lengths or distances that appear 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, the 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 array length becomes smaller;

In this way, we have implemented backward playback. Needless to say the implementation principle. If we play back forward, do we have to obtain and delete the first value of the array? Ha, try to write it. Bar.

I have to say that it is still more comfortable to drag with the mouse. It is too inconvenient to move the keyboard. You can drag without restraint with the mouse... The weather has set and it is hot, but today is not bad...