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

Today we're going to look at how to make dragging objects not pull out of a div and drag the adsorption function

The last time we talked about dragging is not to drag out the scope of the visual area, on this basis we add a parent div, do not let him drag out the parent. The principle is the same as before, simple.

HTML code:

<div id= "Div2" >
      <div id= "Div1" >

      </div>
    </div>

CSS code:

<style type= "Text/css" >
      #div1 {
        width:100px;
        height:100px;
        background:red;
        Position:absolute;
      }
      #div2 {
        width:400px;
        height:300px;
        Background: #CCCCCC;
        position:relative;
      }
    </style>

JavaScript code:

<script type= "Text/javascript" >//Drag empty div low version of Firefox bug window.onload = function () {var odiv = d
        Ocument.getelementbyid ("Div1");
        var oDiv2 = document.getElementById ("Div2");
        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;
            if (Odivleft < 0) {odivleft = 0; else if (Odivleft > Odiv2.offsetwidth-odiv.offsetwidth) {odivleft = ODIV2.OFFSETWIDTH-ODIV.OFFSETW
            Idth;
            } 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, solve Firefox bugs};
    }; </script>

The effect chart is as follows:

It's easy.

The next step is how to get him to automatically adsorb.

In fact, this people will often use, such as PS inside a small window dragged to the edge of the page, he will automatically adsorption up.

How can we have such a function of this tug?

This is in fact before the movement of the time mentioned, like a taxi you can not exactly to the driver parked there, he must be parked near the destination place.

The program is the same, almost soon to the direct assignment can be. Assuming that I dragged the object from 50px to the left, I thought he was on the left, and the direct assignment was 0, and he would automatically adsorb it.

The principle is very simple, see how the code to achieve it. A little modification can be done

<script type= "Text/javascript" > window.onload = function () {var odiv = document.getElementById ("Div1
        ");
        var oDiv2 = document.getElementById ("Div2");
        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;
            var odivleft = Oevent.clientx-disx;


            var odivtop = Oevent.clienty-disy;
            When left is less than 50, it is automatically normalized to 0 so as to achieve adsorption if (Odivleft <) {Odivleft = 0; else if (Odivleft > Odiv2.offsetwidth-odiv.offsetwidth) {odivleft = ODIV2.OFFSETWIDTH-ODIV.OFFSETW
            Idth;
            } 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;
      };
    }; </script>

The next time you talk about advanced applications, these will be more responsible and more useful. has perfected our drag and drop function.

For example, drag the picture and text selection. For example, we now drag and drop on the page is only a div, in peacetime development is not encountered.

In fact, there is something on the page, this drag will be what problems???

We'll fix it next time, look forward to it.