Js playback drag track ------- Day48

Today, I'm a little happy. The number of csdn blog views has exceeded. I have never seen such a high number of views in the past. I have to say that there are still some bad feelings when there are too many times. I can see that these encouragement still cannot help but feel happy, at least, this gives me the feeling of being in the industry.

Let's not talk about it much. Continue with today's record, record the drag and drop traces, and analyze the process first:

1. To implement playback drag and drop traces, there must be records first;

2. to record the drag Trace, you must drag the trace;

This problem was solved a few days ago. At that time, the implementation was slightly flawed, but the general implementation method was well understood. So today, the implementation of this problem is much faster, and I am really happy, after achieving it again today and understanding it a little deeper, let's record it today;

As for the drag-and-drop trace of records, this analysis is a long story. After all, it has been done once:

1. determine the position and status of the current div, and ensure that absolute can be dragged;

2. Listen to mouse drag events (several mouse events summarized yesterday );

3. Make a response based on the corresponding mouse event, and record the existing vertices of the div in onmousemove drag;

4. Listen to the mouse bullet events to end the drag and drop events and point records.

Let's implement the code first (all the code is listed here and analyzed one by one later ):

Html language:

// This is still so familiar. reback // This is for playback.

Javascript section:

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 record and playback. Others are basic elements for obtaining var oa = document. getElementsByTagName ("a") [0]; obj. onmousedown = function (event) {var event = event | window. event; disX = event. clientX-obj.offsetLeft; // The distance between the mouse and the div border disY = event. clientY-obj.offsetTop; dragIf = true; // The position that can be dragged. p Ush ({x: obj. offsetLeft, y: obj. offsetTop}); // The record starts to return false;}; document. onmousemove = function (event) {if (! DragIf) return; // this judgment is extremely important. It is valid only when the press is moved. var event = event | window. event; var nowX = event. clientX-disX; // The distance between the cursor and the div recorded above to know the distance between the div and the webpage. var nowY = event. clientY-disY; var maxX=document.doc umentElement. clientWidth-obj.offsetWidth; // here is offsetWidth, is the div width, not offsetLeftvar maxY=document.doc umentElement. clientHeight-obj.offsetHeight; nowX = nowX <0? 0: nowX; // these judgments, except that the boundary nowY = nowY cannot be determined. <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"; // do not forget + "px", only style. left/top is an obj with "px. style. top = nowY + "px"; position. push ({x: nowX, y: nowY}); // keep record. obj. innerHTML = "X:" + nowX + "Y:" + nowY; // The returned false;}; document. onmouseup = function () {dragIf = false; // drag and drop operations are not allowed and obj is recorded. innerHTML = "X:" + obj. offsetLeft + "Y:" + obj. offsetTop ;}; oa. onclick = function () {if (position. length = 1) retur N; // when there is only one, it indicates that var timer = setInterval (function () {var oPos = position. pop (); oPos? (Obj. style. left = oPos. x + "px", obj. style. top = oPos. y + "px"): clearInterval (timer); // This method is amazing again}, 30); return false ;};};

Key Points to Note:

1. var position array, set of points: This point is the moving point in the upper left corner of the div. That is to say, the recorded moving track is actually the set of points in the upper left corner of the div, offsetLeft is the x coordinate, and offsetTop is the y coordinate. Do you know how to draw this coordinate axis;

2. Several lengths or distances in the program: offsetleft?clientx=offsetwidth=style.leftand document.doc umentElement. clientWidth;

3. push () method: add elements to the end of the array and change the length of the array;

4. pop () method: delete and return the last element of the array. There are two key points. One is to return the last element. The other is to delete the element and the length of the array is reduced;

In this way, we implement reverse playback, so we don't need to talk about the implementation principle. If we are playing back, will we need to get and delete the first value of the array.

I have to say that it is comfortable to drag the mouse. It is too inconvenient to move the keyboard. You can drag the mouse without authorization ..... it's already busy. It's so hot. It's okay today ....