Okay, go to the text and introduce several functional functions before you start!
1. Functions for formatting events
Copy Code code as follows:
function GetEvent () {
Simultaneous compatibility of 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 location of the mouse
Copy Code code 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. Get the position of the element
Copy Code code 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 of all, it is of course to write the initial layout of the page, view the initial page effect
The general drag element is following the mouse, my idea is to add the drag element to a position for absolute Div,
Drag the mouse when it is the position of the mouse according to the coordinates of the changes can be. So add a onload on the page
Copy Code code as follows:
var tmpdiv=null;//temporarily holds a div for dragging objects
Window.onload=function () {
Tmpdiv=document.createelement ("div");
TmpDiv.style.cssText = ' position:absolute;display:none;border:1px dotted #FFCC66; ';
Document.body.appendChild (TMPDIV);
}
To implement the drag, the first trigger event is MouseDown, so I tie the onmousedown= "MouseDown (this) to a TD on the dragged table."
Program code
Copy Code code as follows:
var dragobject = null;//dragged Element (table)
var mouseoffset = null;//The position of the mouse in the dragged element
The div of the column where the Var dragdiv=null;//dragged the table
The height of the parent node (DIV) of the table dragged by Var eledivw=null;//
The number of div used to place a table in the div of the column where the table is dragged by Var dragdivlen=null;//
var dragcontainer=["col1", "col2", "Col3"];//the ID of the div used to implement the column layout
Drag the mouse down the element
function MouseDown (elem) {
Ev=getevent ();
Dragobject = elem.parentnode.parentnode.parentnode;//Dragged table
Dragdiv=dragobject.parentnode.parentnode;
Drag the number of column Div 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 mouse position in the dragged 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 the mouse moving drag objects can also move, use of course is MouseMove, for the simple I bound in the document,
Copy Code code as follows:
Document.onmousemove = MouseMove;
function MouseMove () {
Ev=getevent ();
var mousepos = mousecoords (EV);
if (dragobject) {
Dragobject.parentnode.style.display= "None";/set to place the div hidden by 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.
Copy Code code as follows:
Document.onmouseup = mouseUp;
Mouse Loose
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";
Here is the decision to clear the height value of the previous setting when column has a drag element 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, when you release the left mouse button, the dragged elements will return to the original position to view the drag page effect
The last thing to do is to let the drag element not go back to the original position, but back to where we dragged.
Here's all the code for the MouseMove event, and look at the annotations.
Copy Code code as follows:
function MouseMove () {
Ev=getevent ();
var mousepos = mousecoords (EV);
if (dragobject) {
The number that can be dragged is 1, which means that the column does not have a drag element after dragging, so set its height to 20px, to avoid the column from being not highly visible.
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";
The coordinates of the center point of the dragged object
var dragobjcntx=mousepos.x-mouseoffset.x+parseint (dragobject.offsetwidth)/2;
var dragobjcnty=mousepos.y-mouseoffset.y+parseint (dragobject.offsetheight)/2;
Judge the column in which 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=dcposminx+dcwidth;
var dcposmaxy=dcposminy+dcheight;
if (dragobjcntx>dcposminx&&dragobjcntx<dcposmaxx&&dragobjcnty>dcposminy&& Dragobjcnty<dcposmaxy) {
var Activecontainer=curcontainer;
Break
}
}
}
To determine which block is tmpdiv 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 this chunk exists, insert the drag element before this block
if (befornode!=null) {
if (Dragobject.parentnode!=befornode) {
Curcontainer.insertbefore (Dragobject.parentnode,befornode);
dragobject.parentnode.style.display= "Block";
document.getElementById ("Test"). Value=curcontainer.id;
}
}
Insert a drag element in the column where it does not exist
else{
Curcontainer.appendchild (Dragobject.parentnode);
dragobject.parentnode.style.display= "Block";
}
}
return false;
}
Well, a page that can drag the layout is done to see the final page effect
Ability is limited, some place may say is not clear, if have interest, oneself take a good look at the code.
If there is any shortage of places, please advise.
