Javascript drag-and-drop prototype-line-by-row analysis code that makes it easy for you to drag and drop the principle

The principle of drag and drop: In fact, the distance between the mouse and the upper left corner remains the same. Let's see,

This red dot is the mouse. Drag-and-drop is actually the location of the mouse to calculate the position of the object, it is so simple, is so capricious. How can we ask for this distance?

The position of the mouse-the difference between the position of the object is that distance, right. The slash is made up of horizontal lines and vertical bars.

Let's see what the program does.

/* He's actually changing the left top of a div, and he's moving. There must be absolute positioning in that style, right? */<style type="Text/css"> #div1 {  width: px;                 height: px;                 background: red;             position: absolute; }            </style><div id="Div1"></div>

Here are a few steps, 1. The mouse presses 2. The mouse lifts up 3. Mouse movement

<script type="Text/javascript">Window.onload = function() {        varOdiv = document.getElementById ("Div1");varDISX =0;varDisy =0; Odiv.onmousedown = function(EV) {          varoevent = EV | | Event//Browser compatibleDISX = Oevent.clientx-odiv.offsetleft;//Landscape position is the position of the mouse-divDisy = Oevent.clienty-odiv.offsettop;        }; Odiv.onmousemove = function(EV) {            varoevent = EV | |            Event ODiv.style.left = oevent.clientx-disx+' px ';//Current position of mouse-disxODiv.style.top = oevent.clienty-disy+' px ';      }; };</script>

See the words: var odivleft = OEVENT.CLIENTX-DISX; Well, that's clear.
MouseUp let's not look at what the effect is now.
You will find a very interesting phenomenon, I do not press the mouse will follow me to go, this is why???

Let's take a look at the Mousemove:javascript no one in the rules must be mouse down to start is it, no matter you click the mouse does not press down, this mousemove has been happening, so the problem comes from here. When the mouse has not been pressed, this time the mouse on the top of the move should be unresponsive, is to press down to react.

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

By the way, by adding MouseUp, his role was manifested. The function is odiv.onmousemove = NULL; Remove the Move event,

Otherwise, when your mouse lifts up, the object will follow you along. Odiv.onmouseup = null; Don't leave rubbish, the mouse lifted up originally also no use.

Take a look at the modified code:

<script type="Text/javascript">Window.onload = function() {        varOdiv = document.getElementById ("Div1");varDISX =0;varDisy =0; Odiv.onmousedown = function(EV) {          varoevent = EV | | Event//Browser compatibleDISX = Oevent.clientx-odiv.offsetleft;//Landscape position is the position of the mouse-divDisy = Oevent.clienty-odiv.offsettop; Odiv.onmousemove = function(EV) {            varoevent = EV | |            Event ODiv.style.left = oevent.clientx-disx+' px ';//Current position of mouse-disxODiv.style.top = oevent.clienty-disy+' px ';          }; Odiv.onmouseup = function() {Odiv.onmousemove =NULL; Odiv.onmouseup =NULL;//Do not leave garbage, the mouse lifted up would have been useless};      }; };</script>

Now we've made a simple drag-and-drop, and of course there are some small problems that we need to solve.

But in any case, we already have a prototype of a drag-and-drop. We will resolve some bugs in the next issue.

Javascript drag-and-drop prototype-line-by-row analysis code that makes it easy for you to drag and drop the principle