How to use JavaScript For drag Layout

Now, let's move it to the body. We will introduce several function functions before getting started!
1. functions used to format events CopyCode The Code is as follows: function getevent (){
// Compatible with both IE and FF
If (document. All) return window. event;
Func = getevent. Caller;
While (func! = NULL ){
VaR arg0 = func. Arguments [0];
If (arg0 ){
If (arg0.constructor = event | arg0.constructor = mouseevent)
| (Typeof (arg0) = "object" & arg0.preventdefault & arg0.stoppropagation )){
Return arg0;
}
}
Func = func. Caller;
}
Return NULL;
}

2. Get the mouse position

Copy code The Code is as follows:

Function mousecoords (EV ){
If (EV. pagex | eV. Pagey ){
Return {X: eV. pagex, Y: eV. Pagey };
}
Return {
X: eV. clientx + document. Body. scrollleft-document. Body. clientleft,
Y: eV. clienty + document. Body. scrolltop-document. Body. clienttop
};
}

3. Obtain the element position.
Copy codeThe Code is as follows: function getposition (Ele ){
VaR left = 0;
VaR Top = 0;
While (Ele. offsetparent ){
Left + = ELE. offsetleft;
Top + = ELE. offsettop;
Ele = ELE. offsetparent;
}
Left + = ELE. offsetleft;
Top + = ELE. offsettop;
Return {X: Left, Y: Top };
}

First, write the initial layout page to view the initial Page effect.

In general, the drag element follows the mouse, and my idea is to add the drag element to a div whose position is absolute,
When you drag the mouse, let its position change according to the coordinates of the mouse. Therefore, an onload is added to the page.

Copy code Code: var tmpdiv = NULL; // temporarily store the DIV of the drag object
Window. onload = function (){
Tmpdiv = Document. createelement ("Div ");
Tmpdiv.style.css text = 'position: absolute; display: none; Border: 1px dotted # ffcc66 ;';
Document. Body. appendchild (tmpdiv );
}

To implement drag, the first trigger event is mousedown, So I bound onmousedown = "mousedown (this);" to a TD OF THE dragged table );"

ProgramCode

Copy code The Code is as follows: var dragobject = NULL; // The dragged element (table)
VaR mouseoffset = NULL; // The Position of the mouse in the drag Element
VaR dragdiv = NULL; // Div of the column where the dragged table is located
VaR eledivw = NULL; // The height of the parent node (DIV) of the dragged table
VaR dragdivlen = NULL; // The number of divs in the column where the dragged table is located
VaR dragcontainer = ["col1", "col2", "col3"]; // ID of the DIV used to implement Column Layout
// The drag Element
Function mousedown (ELEM ){
Ev = getevent ();
Dragobject = ELEM. parentnode; // The dragged table
Dragdiv = dragobject. parentnode. parentnode;
// Drag the number of divs in the column where the element is located
Dragdivlen = dragdiv. getelementsbytagname ("Div"). length;
Mouseoffset = getmouseoffset (dragobject, Ev );
Eledivw = dragobject. parentnode. offsetwidth;
Dragobject. parentnode. style. Border = "1px dotted # ffcc66 ";
Return false;
}
// Get the cursor position in the drag Element
Function getmouseoffset (target, Ev ){
VaR docpos = getposition (target );
VaR mousepos = mousecoords (EV );
Return {X: mousepos. X-docpos. X, Y: mousepos. Y-docpos. y };
}

The rest of course is that you can move the mouse and drag the object, and you can use mousemove to easily bind the object to the document,

Copy code The Code is as follows: Document. onmousemove = mousemove;
Function mousemove (){
Ev = getevent ();
VaR mousepos = mousecoords (EV );
If (dragobject ){
Dragobject. parentnode. style. Display = "NONE"; // you can hide the DIV that is placed in the dragged table.
// Place the dragged table in a temporary Div and set its coordinates.
For (VAR I = 0; I <tmpdiv. childnodes. length; I ++) tmpdiv. removechild (tmpdiv. childnodes [I]);
Tmpdiv. appendchild (dragobject. clonenode (true ));
Tmpdiv. style. width = eledivw + "PX ";
Tmpdiv. style. backgroundcolor = "# ffffff ";
Tmpdiv. style. Display = "Block ";
Tmpdiv. style. Top = (mousepos. Y-mouseoffset. Y) + "PX ";
Tmpdiv. style. Left = (mousepos. X-mouseoffset. X) + "PX ";
}
Return false;
}

With mousemove, of course, mouseup is indispensable.Copy codeThe Code is as follows: Document. onmouseup = mouseup;
// Release the mouse
Function mouseup (){
If (dragobject ){
If (dragobject. parentnode. style. Display = "NONE") dragobject. parentnode. style. Display = "Block ";
Dragobject. parentnode. style. Border = "1px solid # ffcc66 ";
Tmpdiv. style. Display = "NONE ";
// This indicates that when a column contains an element that can be dragged, the height value set above is cleared 20px.
For (VAR m = 0; m <dragcontainer. length; m ++ ){
VaR coldiv = Document. getelementbyid (dragcontainer [m]);
VaR coldivlen = coldiv. getelementsbytagname ("Div"). Length
VaR colsty = coldiv. getattribute ("style ");
If (coldivlen> 0 & colsty! = NULL ){
Coldiv. removeattribute ("style ");
Break;
}
}
Dragobject = NULL;
}
}

See if you can drag it. When you release the left mouse button, the drag element will return to the original position to view the drag page effect.

The last thing to do is to let the drag element not return to its original position, but return to our drag position.
The following is all the code for the mousemove event. You can see the annotations.Copy code The Code is as follows: function mousemove (){
Ev = getevent ();
VaR mousepos = mousecoords (EV );
If (dragobject ){
// The number of items that can be dragged is 1, indicating that no elements are dragged in this column after the drag. To prevent this column from missing height, set its height to 20px.
If (dragdivlen = 1) dragdiv. style. Height = "20px ";
Dragobject. parentnode. style. Display = "NONE ";
// Add the dragged element to the temporary tmpdiv and set the tmpdiv coordinates.
For (VAR I = 0; I <tmpdiv. childnodes. length; I ++) tmpdiv. removechild (tmpdiv. childnodes [I]);
Tmpdiv. appendchild (dragobject. clonenode (true ));
Tmpdiv. style. width = eledivw + "PX ";
Tmpdiv. style. backgroundcolor = "# ffffff ";
Tmpdiv. style. Display = "Block ";
Tmpdiv. style. Top = (mousepos. Y-mouseoffset. Y) + "PX ";
Tmpdiv. style. Left = (mousepos. X-mouseoffset. X) + "PX ";
// Coordinates of the center of the dragged object
VaR dragobjcntx = mousepos. X-mouseoffset. x + parseint (dragobject. offsetwidth)/2;
VaR dragobjcnty = mousepos. Y-mouseoffset. Y + parseint (dragobject. offsetheight)/2;
// Determine the column where tmpdiv is located
VaR dragconlen = dragcontainer. length;
For (VAR I = 0; I <dragconlen; I ++ ){
VaR curcontainer = Document. getelementbyid (dragcontainer [I]);
VaR dcpos = getposition (curcontainer );
VaR dcposminx = dcpos. X;
VaR dcposminy = dcpos. Y;
VaR dcwidth = curcontainer. offsetwidth;
VaR dcheight = curcontainer. offsetheight;
VaR dcposmaxx = dcposmwidth + dcwidth;
VaR dcposmaxy = dcposminy + dcheight;
If (dragobjcntx> dcposminx & dragobjcntx <dcposmaxx & dragobjcnty> dcposminy & dragobjcnty <dcposmaxy ){
VaR activecontainer = curcontainer;
Break;
}
}
}
// Determine which block of tmpdiv is in this column
If (activecontainer ){
VaR befornode = NULL;
VaR sdiv = activecontainer. getelementsbytagname ("Div ")
VaR acchilen = sdiv. length;
For (j = acChiLen-1; j> = 0; j --){
VaR activediv = sdiv [J];
If (activediv ){
VaR activedivpos = getposition (activediv );
VaR activedivminx = activedivpos. X;
VaR activedivminy = activedivpos. Y;
VaR activedivmaxx = activedivminx + activediv. offsetwidth;
VaR activedivmaxy = activedivminy + activediv. offsetheight;
If (activedivmaxx> dragobjcntx & activedivmaxy> dragobjcnty ){
// If (dragobjcntx> activedivminx & dragobjcntx <activedivmaxx & dragobjcnty> activedivminy & dragobjcnty <activedivmaxy ){
Befornode = activediv;
}
}

}
// If the block exists, insert the drag element before the block.
If (befornode! = NULL ){
If (dragobject. parentnode! = Befornode ){
Curcontainer. insertbefore (dragobject. parentnode, befornode );
Dragobject. parentnode. style. Display = "Block ";
// Document. getelementbyid ("test"). value = curcontainer. ID;
}
}
// If the column does not exist, insert the drag element.
Else {
Curcontainer. appendchild (dragobject. parentnode );
Dragobject. parentnode. style. Display = "Block ";
}
}
Return false;
}

All right, a page that can be dragged to the layout is complete to view the final page effect.

Limited capabilities, some of which may be unclear. If you are interested, take a good look at the code.
Please advise if you have any shortcomings.