<HTML>
<HEAD>
<title>js+css made div layer Minimize and drag-and-drop sorting function </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" >
<table width= "100%" >
<tbody>
<tr bgcolor= "#CCCCCC" bar= "yes" ><td> Baidu </td><td dragarea= "yes" class= "Dragarea" > Dot this drag </td ><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" > Keyword:</td></tr>
<TR><TD colspan= "3" > Description:</td></tr>
</tbody>
</table>
</div>
<div class= "Normal" overclass= "over" dragclass= "normal" >
<table width= "100%" >
<tbody>
<tr bgcolor= "#CCCCCC" bar= "yes" ><td> sina </td><td dragarea= "yes" class= "Dragarea" ... </td><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" > Keyword:</td></tr>
<TR><TD colspan= "3" > Description:</td></tr>
</tbody>
</table>
</div>
<div class= "Normal" overclass= "over" dragclass= "normal" >
<table width= "100%" >
<tbody>
<tr bgcolor= "#CCCCCC" bar= "yes" ><td> Web effects </td><td dragarea= "yes" class= "Dragarea" ... </td><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" > Keyword:</td></tr>
<TR><TD colspan= "3" > Description:</td></tr>
</tbody>
</table>
</div>
<div class= "Normal" overclass= "over" dragclass= "normal" >
<table width= "100%" >
<tbody>
<tr bgcolor= "#CCCCCC" bar= "yes" ><td> colorful film </td><td dragarea= "yes" class= "Dragarea" ... </td><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" > Keyword:</td></tr>
<TR><TD colspan= "3" > Description:</td></tr>
</tbody>
</table>
</div>
</BODY>
<script language= "JavaScript" >
<!--
var dragobjs = [];//can be dragged by an array of elements
var dragobjtops = [];
var draghelper = document.getElementById ("DragHelper")//drag-and-drop position box
var dragobj = null;//Drag object element
var dragobjpos = 0;
var dragobjoffset = {left:0,top:0};//Drag object original position
var mouseindragobjoffset = {x:0,y:0};//The relative position of the mouse over the dragged object
var initheight = 40;
Number.prototype.nan0=function () {return isNaN (this) 0:this;}
function GetPosition (e) {//Get absolute position of element relative to 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) {//Get 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) {//Get relative position of 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.target;
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 the rewrite is to get the current object on top
Document.body.removeChild (dragobj);
Document.body.appendChild (dragobj);
Record the original position of the dragged object
Dragobjoffset.left = DragObj.style.left;
Dragobjoffset.top = DragObj.style.top;
Dragobj.classname = Dragobj.getattribute ("Overclass");
The relative position of the mouse over the dragged 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.target;
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 windowwidth = document.body.offsetwidth;//window width
var windowheight = document.body.offsetheight;//Window height
Drag objects to their current position
var dragobjleft = mousepos.x-mouseindragobjoffset.x;
var dragobjtop = Mousepos.y-mouseindragobjoffset.y;
Increase your judgment, or drag the object and drag it out of the browser window
if (dragobjleft >= 0 && dragobjleft <= windowwidth-dragobj.offsetwidth-20)
DragObj.style.left = Dragobjleft;
if (Dragobjtop >=0)
DragObj.style.top = Dragobjtop;
Repaint ();
}
}
Cloning objects
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.cssText = ' position:absolute;display:none; ';
Document.body.appendChild (DragHelper);
}
-->
</SCRIPT>
</HTML>
