<HTML> <HEAD> <TITLE> New Document </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" > <input type= "text" id= "Evt" name= "Eventvalue" size= "/> <div id=" DragHelper "></div> <div class=" normal "overclass=" over "dragclass=" normal > <table width= "100%" > <tbody> <tr bgcolor= "#CCCCCC" bar= "Yes"><td>cobao</td><td dragarea=" yes "class=" Dragarea ">........</td><td>-x</td ></tr> <tr><td colspan= "3" > Address:http://www.cobao.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> new Wave </td><td dragarea= "yes" class= "Dragarea" >........</td><td>-x</td></tr> <TR><TD colspan= "3" > Address:http://www.sina.com.cn</td></tr> <tr><td colspan= "3" & GT keywords:</td></tr> <tr><td colspan= "3" > Description:</td></tr> </TBODY&G T </table> </DIV> <div class= "Normal" overclass= "over" dragclass= "normal" > <table width= "100%" > <tbody> <tr bgcolor= "#CCCCCC" bar= "yes" ><td> netease </td><td dragarea= "yes" class= "Dragarea" >........&L t;/td><td>-x</td></tr> <tr><td colspan= "3" > Address:http://www.163.com</td> </tr> <tr><td colspan= "3" > keyword:</td></tr> <tr><td colspan= "3" > Description:</td></tr> </tbody> </table> </div> <div class= "Normal" Overcla Ss= "Over" dragclass= "normal" > <table width= "100%" > <tbody> <tr bgcolor= "#CCCC CC "bar=" yes "><td>qq</td><td dragarea=" yes "class=" Dragarea ">........</td><td>-X </td></tr> <tr><td colspan= "3" > Address:http://www.qq.com</td></tr> <TR><TD colspan= "3 "> key word:</td></tr> <tr><td colspan=" 3 "> Description:</td></tr> </tbod y> </table> </div> </BODY> <script language= "JavaScript" > <!--var dragobjs = []; Can drag the element array 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 in the dragged object var initheight = 40; Number.prototype.nan0=function () {return isNaN (this) 0:this;} function GetPosition (e) {//Get absolute position of element relative 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) { Gets 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 + docum Ent.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 make the current object at the topmost document.body.removeChild (dragobj); Document.body.appendChild (dragobj); Record drag object original position dragobjoffset.left = DragObj.style.left; Dragobjoffset.top = DragObj.style.top; Dragobj.classname = Dragobj.getattribute ("Overclass"); The relative position of the mouse in 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 object should be at current position var dragobjleft = mousepos.x-mouseindragobjoffset.x; var dragobjtop = Mousepos.y-mouseindragobjoffset.y; Increase the judgment, or drag the object 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 (); ///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) {Dragob JPOs = 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>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
