JS implementation of drag-and-drop trajectory-------Day48

A little happy today, csdn Blog Browsing volume, in the past has never had such a high number of views, have to say, too many times still some sentimental, can see these encouragement or can't help but happy ah, at least, so let me have a feeling of the staff in the line, Godo AH.

Gossip not to say, continue today's record, record playback drag traces, first from the process of analysis:

1, to achieve the replay drag traces, you must first have a record;

2, to record drag and drop traces, you have to implement drag and drop;

This problem has been done a few days ago, when the realization of a slightly flawed, but the general realization of the method has been clear in the chest, so today in the realization of this problem is a lot faster, really happy, and today realized again after the understanding of a bit deeper, then today to record;

As for the record drag and drop traces, this analysis is to make a long story short, after all done once:

1, determine the position and state of the div now, to ensure that absolute to achieve the drag;

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

3, according to the corresponding mouse events, make corresponding response, in the onmousemove drag and drop record Div existed points;

4, monitor the mouse bounce event, to end the drag and drop events and points of record

Still, the code is implemented first (all the code is listed at the same time, followed by an analysis):

HTML language:

<div style= "Width:50px;height:50px;background-color:cyan;display:block;position:absolute;" id= "ShowZone" > </div>//, this is still so familiar. <a href= "#" style= "Position:absolute;margin-top:100px;color:yellow;background-color: Red; " >reback</a>//, this one's back and forth.

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 achieving record and playback, the other is the basic element of obtaining Var Oa=document.getelementsbytagname ("a") [0];o Bj.onmousedown=function (event) {var event=event| | window.event;disx=event.clientx-obj.offsetleft;//the distance of the mouse relative to the Div border disy=event.clienty-obj.offsettop;dragif=true;// You can drag the flag Position.push ({x:obj.offsetleft,y:obj.offsettop});//record starts at this time return false;}; Document.onmousemove=function (Event) {if (!dragif) return;//This judgment is extremely important, only the pressed move is valid var event=event| | Window.event;var nowx=event.clientx-disx;//According to the above record of the mouse relative div distance to know the div relative to the distance of the page is Var nowy=event.clienty-disy;var maxx= document.documentelement.clientwidth-obj.offsetwidth;//here is offsetwidth, is the width of the Div, not the Offsetleftvar maxY= document.documentelement.clientheight-obj.offsetheight;nowx=nowx<0?0:nowx;//these judgments, just judge not out of bounds nowy=nowy<0?0 : Nowy;nowx=nowx>maxx?maxx:nowx;nowy=nowy>maxy?maxy:nowy;obj.style.margintop=obj.style.marginleft=0;o Bj.style.left=nowx+ "px";//Do not forget + "px", only style.left/top is "px" obj.style.top=nowy+ "px";p osition.push ({x:nowx,y:nowy});// Keep track of it. obj.innerhtml= "X:" +nowx+ "Y:" +nowy;//visual See Change return false; Document.onmouseup=function () {dragif=false;//is not allowed to drag and record Obj.innerhtml= "X:" +obj.offsetleft+ "Y:" +obj.offsettop;};o A.onclick = function () {if (position.length = = 1) return;//Only one time, the description does not move var timer = setinterval (function () {var oPos = Po Sition.pop (); OPos? (Obj.style.left = opos.x + "px", Obj.style.top = Opos.y + "px"): clearinterval (timer),//is also amazed by this notation}, (); return false;};} ;

key points to note, briefly say a few:

1, var position array, the collection of points: this point, is a div in the upper left corner of the moving point, that is, we recorded the movement trajectory is actually the upper left corner of the div point of the set, offsetleft x coordinate, offsettop y coordinate, this axis you know how to draw not ；

2, the procedure appears several lengths or the distance: offsetleft, ClientX, offsetwidth, Style.left and Document.documentElement.clientWidth and so on;

3, Push () method: Add elements to the end of the array, change the length of the array, the end of OH;

4, Pop () method: Delete and return the last element of the array, the key points are two, one: return the last element, and the other: delete the element, the length of the array becomes smaller;

In this way we realize backwards playback, the implementation of the principle is not much to say, if we are playing back, we are going to get and delete the first value of the array, ha, try to write and read it.

Have to say or use the mouse to drag up comfortable, keyboard movement is too inconvenient, with the mouse can be unscrupulous drag ah ..... Days have fits, to hot, today is OK ....