Javascript drag and drop some of the problems in the prototype (line-by-row analysis of the code, allowing you to easily drag the principle) _javascript skills

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

Attach the previous period JavaScript code to facilitate viewing of the problem.

<script type= "Text/javascript" >
   window.onload = function () {
    var odiv = document.getElementById ("Div1") ;
    var disx = 0;
    var disy = 0;
    Odiv.onmousedown = function (ev) {
     var oevent = EV | | | event; 
     DISX = Oevent.clientx-odiv.offsetleft; 
     Disy = Oevent.clienty-odiv.offsettop;

     Odiv.onmousemove = function (ev) {
      var oevent = 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 if I move the mouse faster, you will find this mouse from this div out, this time Div will not follow the mouse away.

So why does this problem occur?

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

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

Then we modify the code accordingly.

<script type= "Text/javascript" >
   window.onload = function () {
    var odiv = document.getElementById ("Div1") ;
    var disx = 0;
    var disy = 0;
    Odiv.onmousedown = function (ev) {
     var oevent = EV | | | event; 
     DISX = Oevent.clientx-odiv.offsetleft; 
     Disy = Oevent.clienty-odiv.offsettop;
    Event Loading document
     Document.onmousemove = function (ev) {
      var oevent = 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 quick problem is solved, but when I move the mouse to this position

Now you can see clearly that the mouse is not on the DIV, and if you lift the mouse at this time, you can see it moving again. This is another bug!.

In fact, the problem is the same as the above. So it's very simple to solve. We'll add MouseUp to the document, and we'll try it out.

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

So now if you move to that position, it won't be in the previous bug, and there's no problem moving fast. Everything is normal.

3. Let's look at browser compatibility issues

In fact, there is a problem with the low version of Firefox
。 How it appears, when you first drag the time is right, in the drag time and hold on the move, you will find that there will be a shadow in the back. What the hell is going on here?

Actually, we're dragging an empty div. Firefox is a bug, so if you add something to the div

You'll find there's no more problems now.

So Firefox bugs only appear in the empty Div.

Solution:

In fact, it is very simple, we just stop the browser default event can return false; In the onmousedown. Why should it be added to the onmousedown?

We can think about, drag and drop from which event began, it is from the onmousedown start, when the mouse is pressed when the drag began. So to load the onmousedown.

is actually added a return false; Masking the bug in Firefox.

So no matter how the delay will be no problem.

Attached code:

<script type= "Text/javascript" >
   window.onload = function () {
    var odiv = document.getElementById ("Div1") ;
    var disx = 0;
    var disy = 0;
    Odiv.onmousedown = function (ev) {
     var oevent = EV | | | event;
     DISX = Oevent.clientx-odiv.offsetleft;
     Disy = Oevent.clienty-odiv.offsettop;
     Event Loading document
     Document.onmousemove = function (ev) {
      var oevent = 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>

Now the program is complete, but there are still some problems with the user experience.

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

Then we're going to add a judgment. It's very simple, if you go out on the left.

, that would be directly equal to 0, he will not go out from the left. So it's the same thing on the top.

So how to prevent from the right to go out?? It's clear to draw a picture. In fact, we just have to take the width of the page to reduce the width of the div can be counted out.

So this is called the maximum value, to determine if the moving distance exceeds the maximum value is equal to the maximum. Then the bottom is the same.

Attached complete code:

<script type= "Text/javascript" >//Drag empty div low version of Firefox bug window.onload = function () {var odiv = d
        Ocument.getelementbyid ("Div1"); var disx = 0;
        var disy = 0;
          Odiv.onmousedown = function (ev) {var oevent = EV | | | event;
          DISX = Oevent.clientx-odiv.offsetleft;

          Disy = Oevent.clienty-odiv.offsettop;
            Document.onmousemove = function (ev) {var oevent = EV | | | event;
            Stores the current location of the div var odivleft = oevent.clientx-disx;


            var odivtop = Oevent.clienty-disy;
            Dragged out of the left. if (Odivleft < 0) {odivleft = 0; else if (Odivleft > Document.documentelement.clientwidth-odiv.offsetwidth) {odivleft = Document.docu
            Mentelement.clientwidth-odiv.offsetwidth;
            } if (Odivtop < 0) {odivtop = 0; else if (Odivtop > Document.documentelement.clientheight-odIv.offsetheight) {odivtop = Document.documentelement.clientheight-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, solve Firefox bugs};
    }; </script>

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