Implementation principle of drag-and-drop effect 2

The above section analyzes the drag and drop effects of HTML5-supported browsers. This document does not use any libraries to analyze the Drag and Drop Process.

First, let's take a look at how we perform drag operations. There are several steps:

1. Press the mouse, move the mouse, drag, and move the dragged object.
2. The mouse is released, the object is stopped, and there is no drag
3. Calculate the distance and drag distance (move the mouse)

Corresponding to the event is

1. Onmousedown, onmousemove, start dragging
2. Onmouseup, stop dragging
3. Calculate the relative drag distance

Next we will write a drag-and-drop effect based on this idea. If we drag the title, the content of this part will follow.

1. First, write a block containing the title and content.

 
CSS: # Doc {border: 1px solid # a0b3d6; Background: white; position: absolute; left: 150px; top: 150px; }# title {Line-Height: 24px; background: Gray; border-bottom: 1px solid # a0b3d6; padding-left: 5px; cursor: Move ;}# content {width: 320px; Height: 150px;} HTML: <Div id = "Doc"> <Div id = "title"> title </div> <Div id = "content"> content ...... </Div>
 

First, when dragging, We need to calculate the distance between the drag object and the top and bottom of the screen.

Top = target. Top;

Left = target. Left;

Write the onmousedown event, which can be dragged to the object

Title. onmousedown = function (event ){

Event = event | window. event;

// Prevent text in IE from being selected

This. unselectstart = function (){

Return false;

};

// Record start position

Curx = event. pagex? Event. pagex: event. clientx + document. Body. scrollleft | document.doc umentelement. scrollleft;

Cury = event. Pagey? Event. Pagey: event. clienty + document. Body. scrolltop | document.doc umentelement. scrolltop;

}

Write the onmousemove event, which is moved in the Document. You should add it to the document.

Document. onmousemove = function (event ){

Event = event | window. event;

VaR nowx = event. pagex? Event. pagex: event. clientx + document. Body. scrollleft | document.doc umentelement. scrollleft,

Nowy = event. Pagey? Event. Pagey: event. clienty + document. Body. scrolltop | document.doc umentelement. scrolltop;

VaR disx = nowx-curx,

DISY = Nowy-Cury;

Target. style. Top = Top + DISY;

Target. style. Left = left + disx;

Write the onmouseup event. This is also in the Document. Add it to the document.

Document. onmouseup = function (event ){

Event = event | window. event;

Left = target. Left;

Top = target. Top;

}

CompleteCodeAs follows:

 VaR Params = {
Left: 0,
Top: 0,
Currentx: 0,
Currenty: 0,
Flag: False 
};
 //  Obtain CSS attributes  
  VaR Getcss = Function (O, key ){
 Return O. currentstyle? O. currentstyle [Key]: Document. defaultview. getcomputedstyle (O, False ) [Key];
};

VaR Startdrag = Function (Title, target ){

Params. Left = getcss (target, "Left ");
Params. Top = getcss (target, "TOP ");

Title. onmousedown = Function (Event ){
Event = event | window. event;
Bar. onselectstart = Function (){
 Return   False ;
}
Params. Flag =True ;
Params. currentx = event. pagex? Event. pagex: event. clientx + document. Body. scrollleft | document.doc umentelement. scrollleft,
Params. currenty = event. Pagey? Event. Pagey: event. clienty + document. Body. scrolltop | document.doc umentelement. scrolltop;
};
Document. onmouseup = Function (){
Params. Flag = False ;
Params. Left = getcss (target, "Left ");
Params. Top = getcss (target, "TOP ");
};
Document. onmousemove =Function (Event ){
Event = event | window. event;
 If (Params. Flag ){
 VaR Nowx = event. pagex? Event. pagex: event. clientx + document. Body. scrollleft | document.doc umentelement. scrollleft,
Nowy = event. Pagey? Event. Pagey: event. clienty + document. Body. scrolltop | document.doc umentelement. scrolltop;
 VaR Disx = nowx-Params. currentx,
DISY = Nowy-Params. currenty;
Target. style. Left = parseint (Params. Left) + disx + "PX ";
Target. style. Top = parseint (Params. Top) + DISY + "PX ";
}
}
};

This article is complete ..