JS Implementation mouse Drag div-------Day44

If you ask such a question, "You think the mouse operation is simple, or simple keyboard operation," I believe there will be most people will answer the mouse bar, after all, keyboard buttons so many, if the hand is small or not standardized, too prone to problems, but also the speed and effectiveness of the operation is greatly reduced, of course, can not be denied, There will be a group of people, operating the keyboard to completely ignore the mouse, but these should be the level of ashes, at least I now the level of contact, can only aspire.

However, when faced with such a problem, I suddenly a bit tangled, because after all, I was so thinking, but this development let me is a slump in glasses, keyboard operation I in the development, I can only determine whether the key button, and then different responses according to different keys, and to the mouse here, although the three keys, There are even two (ordinary mouse, high-end mouse other keys do not count), the corresponding event is absolutely a lot of, left, right, long press, double-click, Wheel and so on, which is simple ah, the original is not simple.

Let's take a look at the application of the mouse-drag-and-drop, and what should be the implementation structure:

1, drag-and-drop effect of monitoring, here is Zoo Press and drag the mouse;

2, drag the end, the mouse button to play the monitoring, change the position of the original Div;

3, of course, if there is a display process effect, the best div can follow the mouse at any time;

So we'll just attach the code:

HTML section:

<div style= "Width:50px;height:50px;background-color:cyan;position:absolute;" id= "ShowZone" >

Then there is javascript:

var zindex=1;//gets the div object to move window.onload=function () {var Obj=document.getelementbyid ("Showzone"); var disx=disy=0;o Bj.onmousedown=function (event) {var event=event| | Window.event;disx=event.clientx-this.offsetleft;disy=event.clienty-this.offsettop;var move= Document.createelement ("div");//This temporary a little flaw, do not know which problem, found will immediately correct move["id"]= "road"; Move.style.left=this.currentstyle? This.currentstyle["left"]:getcomputedstyle (this,null) ["Left"];move.style.top=this.currentstyle? this.currentstyle["Top"]:getcomputedstyle (this,null) ["Top"];move.style.zindex=zindex++; Document.body.appendChild (move);d ocument.onmousemove=function (event) {//monitor mouse drag var event=event| | Window.event;var nowleft=event.clientx-disx;//This place is a key, before the DISX here to understand what to do with the relative position of the use of Var Nowtop=event.clienty-disy ; var Maxl=document.documentelement.clientwidth-obj.offsetwidth;var maxt= document.documentelement.clientheight-obj.offsetheight;nowleft<=0&& (nowLeft=0);//judgment off the boundary ah, But how about this photo? nowtop<=0&& (nowtop=0);nowleft>=maxl&& (nowleft=maXL);nowtop>=maxt&& (NOWTOP=MAXT);d Ocument.getelementbyid ("Showzone"). Innerhtml=nowleft; move.style.left=nowleft+ "px"; move.style.top=nowtop+ "px"; return false;}; Document.onmouseup=function () {//monitor mouse bounce document.onmousemove=null;document.onmouseup=null;obj.style.left= Move.style.left;obj.style.top=move.style.top;obj.style.zindex=move.style.zindex;document.body.removechild (move ); Obj.releasecapture&&obj.releasecapture ();}; This.setcapture&&this.setcapture (); return false;};};

Here are some key points to analyze:

1, ClientX

Before we applied the Styl E.left;offsetleft, here again out of such a clientx, it is the meaning of the mouse relative to the document distance ah, decisive memory ah.

2, Currentstyle and getComputedStyle

In fact, this is also a browser differences, as with the event, IE does not have a getComputedStyle method, but each has a style attribute element has currentstyle properties, meaning is almost the same, and getComputedStyle () has two parameters, the first is the need to calculate the style of the element, the latter is a pseudo-element, if there is no pseudo-operation can be empty, pseudo-element ah, this has not learned it, but here is not used, back to study it

3, Document.documentElement.clientWidth

Let's just remember the width of the document for the time being.

This feature temporarily has some flaws, but the general function is realized, want to relax, look back to find the crux of the problem and then change it.

Today is a Saturday, accompany daughter-in-law to see "where Dad go", sure enough still be Meng.