Javascript drag-and-drop prototype (line-by-row analysis of the code, let you easily drag the principle) _javascript skills

Drag the principle: in fact, the mouse and the upper left corner of the distance remain unchanged. Let's look at the picture below, the red dot is the mouse.

Drag and drop is actually the position of the mouse to calculate the position of the object, it is so simple, is so capricious. Then how to ask for this distance??

The position of the mouse-the difference between the position of the object is that distance. That Slash is made up of horizontal and vertical lines.

Let's look at what the program does.

<div id= "Div1" >

    </div>

In fact, he changed the left top of a Div, so he moved. There must be absolute positioning in that style, right?

<style type= "Text/css" >
      #div1 {
        width:200px;
        height:200px;
        background:red;
        Position:absolute;
      }
    </style>

Here are a few steps, 1. The mouse presses 2. Mouse lift up 3. Mouse move

<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//Browser compatible
     DISX = oevent.clientx-odiv.offsetleft;//Horizontal The position is the position of the mouse-div
     disy = oevent.clienty-odiv.offsettop;

    Odiv.onmousemove = function (ev) {
      var oevent = EV | | | event;
      ODiv.style.left = oevent.clientx-disx+ ' px '; The position of the current mouse-disx
      oDiv.style.top = oevent.clienty-disy+ ' px '
  ;}; </script>

Look at the illustrated words:

var odivleft = Oevent.clientx-disx; The picture says it's clear.

MouseUp let's take a look at what the effect is now.

You will find a very interesting phenomenon, I do not click the mouse will follow me to go, this is why???

We come to see Mousemove:javascript no one in the rules must be the mouse to press before starting is it, whether you click on the mouse, this mousemove has been happening, so the problem comes from here. When the mouse has not been pressed before, this time the mouse on the move should be no response, is to press down to have a response.

So, this mousemove should not be added on the first, but wait until the mouse press down and then add MouseMove, to see the modified code.

By the way plus MouseUp, then his role is reflected. function is odiv.onmousemove = NULL; Remove the Move event,

Otherwise, when you lift the mouse, the object will follow you. Odiv.onmouseup = null; Do not leave litter, the mouse to lift the original will not be used.

Take a look at the modified 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//Browser compatible
     DISX = oevent.clientx-odiv.offsetleft;//Horizontal The position of the mouse is the position of the-div
     disy = oevent.clienty-odiv.offsettop;

     Odiv.onmousemove = function (ev) {
      var oevent = EV | | | event;
      ODiv.style.left = oevent.clientx-disx+ ' px '; The position of the current mouse-disx
      oDiv.style.top = oevent.clienty-disy+ ' px ';
     Odiv.onmouseup = function () {
      odiv.onmousemove = null;
      Odiv.onmouseup = null; Does not leave the rubbish, the mouse lifts originally also did not use
     }

    ;
  </script>

Now we have a simple drag and drop out, of course, there are some small problems to be solved.

But in any case, we already have a drag-and-drop prototype. We'll fix some bugs in the next issue.