Some of the problems with Javascript dragging the prototype--progressive parsing of code to make it easy for you to drag and drop the principle

Today we are going to solve some of the problems in the last drag-and-drop prototype. What are the questions below?

Attach the JavaScript code of the previous period to make it easier for you to see the problem.

<script type= "Text/javascript" >window.onload=function() {        varOdiv = document.getElementById ("Div1"); varDISX = 0; varDisy = 0; Odiv.onmousedown=function(EV) {varoevent = EV | |event; DISX= Oevent.clientx-Odiv.offsetleft; Disy= Oevent.clienty-Odiv.offsettop; Odiv.onmousemove=function(EV) {varoevent = EV | |event; ODiv.style.left= oevent.clientx-disx+ ' px '; ODiv.style.top= oevent.clienty-disy+ ' px ';          }; Odiv.onmouseup=function() {Odiv.onmousemove=NULL; Odiv.onmouseup=NULL;        };      };    }; </script>

1. Now this drag-and-drop if I move the mouse quickly, you will find the mouse from this div out, this time Div will not follow the mouse away.

Then why does this problem occur?

The reason is actually very simple, MouseMove event we are to add the div, so once the mouse out of the Div, then this time MouseMove has not been triggered.

Solution: Event loading document, because your mouse is still in the page anyway, how will trigger MouseMove so move in the fast also no problem.

Then we modify the code accordingly.

<script type= "Text/javascript" >window.onload=function() {        varOdiv = document.getElementById ("Div1"); varDISX = 0; varDisy = 0; Odiv.onmousedown=function(EV) {varoevent = EV | |event; DISX= Oevent.clientx-Odiv.offsetleft; Disy= Oevent.clienty-Odiv.offsettop; //event load on documentDocument.onmousemove =function(EV) {varoevent = EV | |event; ODiv.style.left= oevent.clientx-disx+ ' px '; ODiv.style.top= oevent.clienty-disy+ ' px ';          }; Odiv.onmouseup=function() {Document.onmousemove=NULL; Odiv.onmouseup=NULL;        };      };    }; </script>

Then the problem can be solved.

2. Let's see what the problem is now, although the fast problem solved, but when I moved the mouse to this position, it is now obvious that the mouse is not on the DIV, if the time to lift the mouse, you can see back then it will move. This is another bug!.

In fact, the problem is the same as above. So it's easy to solve. We've added MouseUp to document, let's try it out.

Document.onmouseup = function () {
Document.onmousemove = null;
Document.onmouseup = null;
};

This way, if you move to that position, you won't have a bug in front of you, and there's no problem with moving fast. Everything is normal.

3. Let's look at browser-compatible issues

In fact, in the low version of the Firefox browser has such a problem. How does that happen, when you're right the first time you drag it, hold it down while you drag it, and you'll find that there's a shadow behind it. What's going on here?

In fact, we are now dragging an empty div Firefox is a bug, then if you add content in the Div, you will find that now there is no problem.

So Firefox bugs only appear in the empty Div.

Solution:

In fact, it is very simple, we just block the browser default event can return false; In the onmousedown. Why add it to the onmousedown?

You can think about, drag and drop from which event began, is starting from the OnMouseDown bar, when the mouse press the drag on the start. So to load the onmousedown.

is actually adding a return false; The Firefox bug was blocked out.

So no matter how to drag it is no problem.

Attached code:

<script type= "Text/javascript" >window.onload=function() {        varOdiv = document.getElementById ("Div1"); varDISX = 0; varDisy = 0; Odiv.onmousedown=function(EV) {varoevent = EV | |event; DISX= Oevent.clientx-Odiv.offsetleft; Disy= Oevent.clienty-Odiv.offsettop; //event load on documentDocument.onmousemove =function(EV) {varoevent = EV | |event; ODiv.style.left= oevent.clientx-disx+ ' px '; ODiv.style.top= oevent.clienty-disy+ ' px ';          }; Document.onmouseup=function() {Document.onmousemove=NULL; Document.onmouseup=NULL;          }; return false;      };    }; </script>

The program is now complete, but there are some problems with the user experience.

For example, the user may drag the div out of the browser, how to solve it?

Then we're going to add a judgment. This is very simple, if go out from the left, it is directly equal to 0, he will not go out from the left. Then the top is the same.

So how can you prevent it from going out on the right? Drawing a picture is clear. As a matter of fact, we can figure out the width of the div by reducing the width of the viewable page.

That this is the so-called maximum value, judge if the distance moved beyond the maximum value is equal to this maximum. Then the bottom is the same.

Enclose the complete code:

<script type= "Text/javascript" >//drag empty div lower version of Firefox has bugWindow.onload =function() {                varOdiv = document.getElementById ("Div1"); varODiv2 = document.getElementById ("Div2"); varDISX = 0; varDisy = 0; Odiv.onmousedown=function(EV) {varoevent = EV | |event; DISX= Oevent.clientx-Odiv.offsetleft; Disy= Oevent.clienty-Odiv.offsettop; Document.onmousemove=function(EV) {varoevent = EV | |event; //Store Div's current location                        varOdivleft = Oevent.clientx-Disx; varOdivtop = Oevent.clienty-Disy; //dragged it out from the left.                        if(Odivleft < 0) {Odivleft= 0; } Else if(Odivleft > Odiv2.offsetwidth-odiv.offsetwidth) {odivleft= Odiv2.offsetwidth-Odiv.offsetwidth; }                        if(Odivtop < 0) {Odivtop= 0; } Else if(Odivtop > Odiv2.offsetheight-odiv.offsetheight) {odivtop= Odiv2.offsetheight-Odiv.offsetheight; } oDiv.style.left= Odivleft + ' px '; ODiv.style.top= odivtop + ' px ';                    }; Document.onmouseup=function() {Document.onmousemove=NULL; Document.onmouseup=NULL;                    }; return false;//block default events, fix bugs in Firefox                };        }; </script>

So now this drag is more complete. O (∩_∩) o

Some of the problems with Javascript dragging the prototype--progressive parsing of code to make it easy for you to drag and drop the principle