Simple and flexible JavaScript drag-and-drop framework (I)

I. Opening

Recently, when I was doing JS drag-and-drop, I found a powerful and flexible drag-and-drop framework. (I used the code obfuscator before. Fortunately, the code is short and I translated it) using this framework can not only achieve simple drag, but also easily implement various complex drag-and-drop functions. This article first implements the simplest drag-and-drop. A slightly complicated drag-and-drop will be written in later articles.

Ii. Code

First paste the code

Code
VaR drag = {
"OBJ": NULL,
"Init": function (handle, dragbody, e ){
If (E = NULL ){
Handle. onmousedown = drag. Start;
}
Handle. Root = dragbody;

If (isnan (parseint (handle. Root. style. Left) handle. Root. style. Left = "0px ";
If (isnan (parseint (handle. Root. style. Top) handle. Root. style. Top = "0px"; // ensure that the top value can be obtained later
Handle. Root. ondragstart = new function ();
Handle. Root. ondragend = new function ();
Handle. Root. ondrag = new function ();
If (E! = NULL ){
VaR handle = drag. OBJ = handle;
E = drag. fixe (E );
VaR Top = parseint (handle. Root. style. Top );
VaR left = parseint (handle. Root. style. Left );
Handle. Root. ondragstart (left, top, E. pagex, E. Pagey );
Handle. lastmousex = E. pagex;
Handle. lastmousey = E. Pagey;
Document. onmousemove = drag. Drag;
Document. onmouseup = drag. end;
}
},
"Start": function (e ){
VaR handle = drag. OBJ = this;
E = drag. fixevent (E );
VaR Top = parseint (handle. Root. style. Top );
VaR left = parseint (handle. Root. style. Left );
// Alert (left)
// In general, Left top is 0 at the initial time.
Handle. Root. ondragstart (left, top, E. pagex, E. Pagey );
Handle. lastmousex = E. pagex;
Handle. lastmousey = E. Pagey;
Document. onmousemove = drag. Drag;
Document. onmouseup = drag. end;
Return false;
},
"Drag": function (e) {// here This is document, so the drag object can only be saved in drag. obj.
E = drag. fixevent (E );
VaR handle = drag. OBJ;
VaR Mousey = E. Pagey;
VaR mousex = E. pagex;
VaR Top = parseint (handle. Root. style. Top );
VaR left = parseint (handle. Root. style. Left); // The top and left are the top and left margins of the browser border.

VaR currentleft, currenttop;
Currentleft = left + mouseX-handle.lastMouseX;
Currenttop = Top + (mouseY-handle.lastMouseY );

// The top margin of the last instant plus the mouse moving distance between the two moments to get the current top margin

Handle. Root. style. Left = currentleft + "PX ";
Handle. Root. style. Top = currenttop + "PX ";

// Update the current location

Handle. lastmousex = mousex;
Handle. lastmousey = Mousey;

// Save the mouse value for this moment for the next calculation of displacement

Handle. Root. ondrag (currentleft, currenttop, E. pagex, E. Pagey); // call the Function
Return false;
},
"End": function (){
Document. onmousemove = NULL;
Document. onmouseup = NULL;
Drag. obj. Root. ondragend (parseint (drag. obj. Root. style. Left), parseint (drag. obj. Root. style. Top ));
Drag. OBJ = NULL;
},
"Fixevent": function (e) {// format the event parameter object
If (typeof E = "undefined") E = Window. event;
If (typeof E. layerx = "undefined") E. layerx = E. offsetx;
If (typeof E. layery = "undefined") E. layery = E. offsety;
If (typeof E. pagex = "undefined") E. pagex = E. clientx + document. Body. scrollleft-document. Body. clientleft;
If (typeof E. Pagey = "undefined") E. Pagey = E. clienty + document. Body. scrolltop-document. Body. clienttop;
Return E;
}
};

Usage

Drag. INIT (handle, dragbody); this allows you to drag the element with the mouse. Handle is the drag handle, and dragbody is the element to be moved when dragging.

 

If you need more advanced drag and drop control, you can set three methods for dragbody.

Dragbody. ondragstart = function (left, top, mousex, Mousey ){}

Ondrag (left, top, mousex, Mousey ){}

Ondragend (left, top, mousex, Mousey ){}

The four parameters are: The left attribute of the drag object, the top attribute of the drag object (The position of the drag object is absolute), the current X of the mouse, and the current y of the mouse. In each process, four parameters can be used to control each process of dragging more accurately. What's more, we don't need to worry about how the elements dragged by the mouse move, these are all done in the Framework, which makes the drag and drop look more neat. The framework is actually very simple.

 

Iii. Principles

Drag has several members.

Drag. obj is used to store the elements that are being dragged by the mouse. The value is assigned only after the mouse is pressed. You can easily find the elements being dragged between these methods.

Drag. init is mainly used to subscribe to the onmousedown event of handle. Therefore, once handle is clicked, the drag. Start method is executed.

Drag. start is used to register the mousemove and mouseup events of the document, and the dragbody we define will be called. ondragstart method (the dragbody here is through drag. (OBJ) to process things outside the framework.

The drag will be continuously triggered during mousemove. the drag method is used to control the movement of the dragbody (adjust the position of the dragbody by the difference between the two moments) and call the external dragbody. the ondrag method is used to process things outside the framework.

The document mouseup method calls the external ondragend method, releases two events bound to the document, and sets the temporary OBJ to null.

Iv. Sample download

Click here to download the sample