Copy codeThe Code is as follows: <HTML>
<HEAD>
<TITLE> DIV layer minimization and drag/drop sorting made by JS + CSS </TITLE>
<Style type = "text/css">
Body
{
Margin: 10px;
}
# DragHelper
{
Position: absolute;/* Important */
Border: 2px dashed #000000;
Background-color: # FFFFFF;
Filter: alpha (opacity = 30 );
}
. Normal
{
Position: absolute;/* Important */
Width: 300px;
# Height: 10px;
Border: 1px solid #666666;
Background-color: # FFFFFF;
}
. Over
{
Position: absolute;/* Important */
Width: 300px;
# Height: 10px;
Border: 1px solid #666666;
Background-color: # f3f3f3;
Filter: alpha (opacity = 50 );
}
. DragArea {
CURSOR: move;
}
</Style>
</HEAD>
<BODY oncontextmenu = "window. event. returnValue = false">
<Div id = "dragHelper" style = "display: none"> </div>
<Div class = "normal" overClass = "over" dragClass = "normal">
& Lt; table width = "100%" & gt;
<Tbody>
<Tr bgcolor = "# CCCCCC" bar = "yes"> <td> Baidu </td> <td dragArea = "yes" class = "dragArea"> click here to drag </ td> <a href = "#" onclick = "openClose (this) ">-</a> x </td> </tr>
<Tr> <td colspan = "3"> address: http://www.baidu.com </td> </tr>
<Tr> <td colspan = "3"> keywords: </td> </tr>
<Tr> <td colspan = "3"> Note: </td> </tr>
</Tbody>
</Table>
</Div>
<Div class = "normal" overClass = "over" dragClass = "normal">
& Lt; table width = "100%" & gt;
<Tbody>
<Tr bgcolor = "# CCCCCC" bar = "yes"> <td> Sina </td> <td dragArea = "yes" class = "dragArea"> ........ </td> <a href = "#" onclick = "openClose (this)">-</a> x </td> </tr>
<Tr> <td colspan = "3"> address: http://www.sina.com.cn </td> </tr>
<Tr> <td colspan = "3"> keywords: </td> </tr>
<Tr> <td colspan = "3"> Note: </td> </tr>
</Tbody>
</Table>
</Div>
<Div class = "normal" overClass = "over" dragClass = "normal">
& Lt; table width = "100%" & gt;
<Tbody>
<Tr bgcolor = "# CCCCCC" bar = "yes"> <td> webpage effects </td> <td dragArea = "yes" class = "dragArea"> .... .... </td> <a href = "#" onclick = "openClose (this)">-</a> x </td> </tr>
<Tr> <td colspan = "3"> address: http://www.CsrCode.cn </td> </tr>
<Tr> <td colspan = "3"> keywords: </td> </tr>
<Tr> <td colspan = "3"> Note: </td> </tr>
</Tbody>
</Table>
</Div>
<Div class = "normal" overClass = "over" dragClass = "normal">
& Lt; table width = "100%" & gt;
<Tbody>
<Tr bgcolor = "# CCCCCC" bar = "yes"> <td> colorful video </td> <td dragArea = "yes" class = "dragArea"> .... .... </td> <a href = "#" onclick = "openClose (this)">-</a> x </td> </tr>
<Tr> <td colspan = "3"> address: http://www.33567.cn </td> </tr>
<Tr> <td colspan = "3"> keywords: </td> </tr>
<Tr> <td colspan = "3"> Note: </td> </tr>
</Tbody>
</Table>
</Div>
</BODY>
<Script language = "JavaScript">
<! --
Var dragObjs = []; // array of elements that can be dragged
Var dragObjTops = [];
Var dragHelper = document. getElementById ("dragHelper"); // The position box when dragging
Var dragObj = null; // drag an object element
Var dragObjPos = 0;
Var dragObjOffset = {left: 0, top: 0}; // original position of the drag object
Var mouseInDragObjOffset = {x: 0, y: 0}; // the relative position of the mouse in the drag object
Var initHeight = 40;
Number. prototype. NaN0 = function () {return isNaN (this )? 0: this ;}
Function getPosition (e) {// obtain the absolute position of the element relative to the document
Var left = 0;
Var top = 0;
While (e. offsetParent ){
Left + = e. offsetLeft;
Top + = e. offsetTop;
E = e. offsetParent;
}
Left + = e. offsetLeft;
Top + = e. offsetTop;
Return {x: left, y: top };
}
Function mouseCoords (ev) {// obtain the absolute position of the mouse relative to the document
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
};
}
Function getMouseOffset (target, ev) {// obtain the relative position of the mouse relative Element
Ev = ev | window. event;
Var elementPos = getPosition (target );
Var mousePos = mouseCoords (ev );
Return {x: mousePos. x-elementPos. x, y: mousePos. y-elementPos. y };
}
Function mouseDown (ev ){
Ev = ev | window. event;
Target = ev. srcElement | ev.tar get;
If (dragObj ){
Return;
}
Var dragArea = false;
If (target. getAttribute ("dragArea ")){
DragArea = true;
}
While (! Target. getAttribute ("isDragObj ")){
If (target. tagName = "HTML ")
Break;
Target = target. parentNode;
}
If (dragArea & target. getAttribute ("isDragObj ")){
DragObj = target;
// The purpose of rewriting is to make the current object at the top layer
Document. body. removeChild (dragObj );
Document. body. appendChild (dragObj );
// Record the original position of the drag object
DragObjOffset. left = dragObj. style. left;
DragObjOffset. top = dragObj. style. top;
DragObj. className = dragObj. getAttribute ("overClass ");
// The relative position of the mouse in the drag object
MouseInDragObjOffset = getMouseOffset (dragObj, ev );
DragHelper. style. left = dragObj. style. left;
DragHelper. style. top = dragObj. style. top;
DragHelper. style. width = dragObj. offsetWidth;
DragHelper. style. height = dragObj. offsetHeight;
DragHelper. style. display = "";
// Alert (dragObj. offsetWidth + ":" + dragObj. clientWidth );
}
}
Function mouseUp (ev ){
Ev = ev | window. event;
Target = ev. srcElement | ev.tar get;
If (dragObj ){
DragObj. style. left = dragHelper. style. left;
DragObj. style. top = dragHelper. style. top;
DragHelper. style. display = "none ";
DragObj. className = dragObj. getAttribute ("dragClass ");
DragObj = null;
}
}
Function mouseMove (ev ){
Ev = ev | window. event;
If (dragObj ){
Var mousePos = mouseCoords (ev );
/* DragHelper. style. left = dragObjOffset. left;
DragHelper. style. top = dragObjOffset. top;
DragHelper. style. width = dragObj. offsetWidth;
DragHelper. style. height = dragObj. offsetHeight;
DragHelper. style. display = "";*/
Var expose wwidth = document. body. offsetWidth; // window width
Var required wheight = document. body. offsetHeight; // window height
// The current location of the drag object
Var dragObjLeft = mousePos. x-mouseInDragObjOffset. x;
Var dragObjTop = mousePos. y-mouseInDragObjOffset. y;
// Add judgment. Otherwise, drag the object to the browser window.
If (dragObjLeft> = 0 & dragObjLeft <= descriwwidth-dragObj. offsetWidth-20)
DragObj. style. left = dragObjLeft;
If (dragObjTop> = 0)
DragObj. style. top = dragObjTop;
Repaint ();
}
}
// Clone object
Function cloneObject (srcObj, destObj ){
DestObj = srcObj. cloneNode (true );
}
Function makeDraggable (element ){
Element. setAttribute ("isDragObj", "y ");
}
Function repaint (){
For (I = 0; I <dragObjs. length; I ++ ){
If (dragObjs [I] = dragObj ){
DragObjPos = I;
DragObjs [I] = dragHelper;
Break;
}
}
If (dragObjPos> 0 & parseInt (dragObj. style. top) <parseInt (dragObjs [dragObjPos-1]. style. top )){
DragObjs [dragObjPos] = dragObjs [dragObjPos-1];
DragObjs [dragObjPos-1] = dragHelper;
DragObjPos = dragObjPos-1;
}
If (dragObjPos <dragObjs. length-1 & parseInt (dragObj. style. top)> parseInt (dragObjs [dragObjPos + 1]. style. top )){
DragObjs [dragObjPos] = dragObjs [dragObjPos + 1];
DragObjs [dragObjPos + 1] = dragHelper;
DragObjPos = dragObjPos + 1;
}
PaintDragObjs ();
DragObjs [dragObjPos] = dragObj;
}
Function paintDragObjs (){
Var h = 40;
For (I = 0; I <dragObjs. length; I ++ ){
DragObjs [I]. style. left = 20;
DragObjs [I]. style. top = h;
H + = dragObjs [I]. offsetHeight + 10;
}
}
Function openClose (obj ){
Obj. innerHTML = obj. innerHTML = "-"? "+ ":"-";
While (obj. tagName! = "TBODY "){
Obj = obj. parentNode;
}
For (I = 0; I <obj. childNodes. length; I ++ ){
If (obj. childNodes [I]. nodeName = "# text"
| Obj. childNodes [I]. getAttribute ("bar") {continue ;}
Obj. childNodes [I]. style. display = obj. childNodes [I]. style. display = ""? "None ":"";
}
PaintDragObjs ();
}
Document. onmousedown = mouseDown;
Document. onmouseup = mouseUp;
Document. onmousemove = mouseMove;
Window. onload = function (){
Var objs = document. getElementsByTagName ("Div ");
For (I = 0; I <objs. length; I ++ ){
Var item = objs. item (I );
// If (I = 1) item. style. height = 150;
If (item. getAttribute ("overClass ")){
MakeDraggable (item );
DragObjs. push (item );
Item. style. left = 20;
Item. style. top = initHeight;
DragObjTops. push (initHeight );
InitHeight + = item. offsetHeight + 10;
}
}
// DragHelper = document. createElement ('div ');
// DragHelper.style.css Text = 'position: absolute; display: none ;';
// Document. body. appendChild (dragHelper );
}
// -->
</SCRIPT>
</HTML>
