Tip: You can modify some of the code before running
<p><ptml><br/> <pead><br/> <TITLE> New Document </title><br/> < Style type= "Text/css" ><br/> body<br/> {<br/> margin:10px;<br/>}</p > <p> #dragHelper <br/> {<br/> position:absolute;/* important */<br/> border:2px dashed #000000 <br/> background-color: #FFFFFF <br/> Filter:alpha (opacity=30); <br/>}</p> <p>.normal<br/> {<br/> position:absolute;/* important */<br/> width:300px;<br/> #height: 10px; <br/> border:1px solid #666666 <br/> background-color: #FFFFFF;< br/>}</p> <p>.over<br/> {<br/> position:absolute;/* Important */<BR & nbsp; width:300px;<br/> #height: 10px;<br/> border:1px solid #666666 <br/> background-color: #f3f3f3; <br/> filter:alpha (opacity=50); <br/>}</p> <p>.dragarea {<br/>: move;<br/>}</p> <p></style><br/> </HEAD></p> <p><body oncontextmenu= "Window.event.returnvalue=false" ><br/> <input type= "text" id= "evt" name= "eventValue" size = "/><br"/> <div id= "DragHelper" style= "Display:none" ></div><br/> <div class= "normal "overclass=" Over "dragclass=" normal "><br/> <table width=" 100% "><br/> < tbody><br/> <tr bgcolor= "#CCCCCC" bar= "yes" ><td><a "#" >Cobao< /A></TD><TD dragarea= "yes" class= "Dragarea" >........</td><td><a href= "#" onclick= " OpenClose (This) ">-</a> x</td></tr><br/> &NBSP;<TR><TD colspan= "3" > Address: http://www.cobao.cn</td></tr><br/> <TR><TD colspan= "3" > Keywords: </td></tr><br/> <tr><td colspan= "3" > Description: </td></tr><br/> </tbody><br/> </table><br/ > </div><br/> <div class= "normal" overclass= "over" dragclass= "normal" ><br/> < Table width= "100%" ><br/> <tbody><br/> <tr "#CCCCCC" Bar= "yes" ><td> sina </td><td dragarea= "yes" class= "Dragarea" >........</td><td><a href= "#" onclick= "OpenClose (This)" >-</a> x</td></tr><br/> <tr> <TD colspan= "3" > Address: http://www.sina.com.cn</td></tr><br/> <tr> <TD colspan= "3" > Keywords: </td></tr><br/> <tr><tD colspan= "3" > Description: </td></tr><br/> </tbody><br/> </table> <br/> </div><br/> <div class= "normal" overclass= "over" dragclass= "normal" ><br/> <table width= "100%" ><br/> <tbody><br/> <tr "# CCCCCC "bar=" yes "><td> netease </td><td dragarea=" yes "class=" Dragarea ">........</td><td ><a href= "#" onclick= "OpenClose (This)" >-</a> x</td></tr><br/> <TR><TD colspan= "3" > Address: http://www.163.com</td></tr><br/> <tr ><TD colspan= "3" > Keywords: </td></tr><br/> <tr><td colspan= "3" > Description: </td></tr><br/> </tbody><br/> </table><br/> </div><br/> <div class= "normal" overclass= "over" dragclass= "normal" ><br /> <table width= "100%" ><br/> <tbody><br/> <tr Bgcolor= "#CCCCCC" bar= "yes" ><td>qq</td><td dragarea= "yes" class= "Dragarea" >........</td ><td><a href= "#" onclick= "OpenClose (This)" >-</a> x</td></tr><br/> &NBSP;&NBSP;<TR><TD colspan= "3" > Address: http://www.qq.com</td></tr><br/> &NBSP;<TR><TD colspan= "3" > Keywords: </td></tr><br/> <tr><td colspan= "3" > Description: </td></tr><br/> </tbody><br/> </table> <br/> </div></p> <p></body><br/> <script language= "JavaScript" ><br/ > <!--<br/> var dragobjs = []; //can drag element array <br/> var dragobjtops = [];</p> <p>var draghelper = document.getElementById ("DragHelper"); //drag-and-drop position box <br/> var dragobj = null; //Drag object element <br/> var Dragobjpos = 0;</p> <p>var dragobjoffset = {left:0,top:0}; //Drag object original position <br/> var Mouseindragobjoffset = {x:0,y:0}; //mouse relative position in drag object </p> <p>var initheight = 40;</p> <p> Number.prototype.nan0=function () {return isNaN (this) 0:this;} </p> <p>function getPosition (e) { //Gets the absolute position of the element relative to the document <br/> var left = 0;<br/> & Nbsp;var top = 0;<br/> while (e.offsetparent) {<br/> left + = e.offsetLeft;<br/&G T top + e.offsettop;<br/> e = e.offsetparent;<br/> }</p> <p> left + e.offsetleft;<br/> top + = e.offsettop;</p> <p> return {x:left, y:top};</p> <p>}</p> <p>function mousecoords (EV) { // Get the absolute position of the mouse relative to the document<br/> if (Ev.pagex | | ev.pagey) {<br/> return {x:ev.pagex, y:ev.pagey};<br/> }<br/> return {<br/> x:ev.clientx + document.body.scrollleft-document.body.clientleft , <br/> y:ev.clienty + document.body.scrolltop -document.body.clienttop<br/> }; <br/>}</p> <p>function getmouseoffset (target, Ev) { // gets the relative position of the mouse relative elements <br/> & Nbsp;ev = EV | | window.event;</p> <p> var elementpos = getPosition (target); <br/> var mousepos = mousecoords (ev); <br/> return {x:mousepos.x-elementpos.x, y:mousepos.y-elementpos.y};& lt;br/>}</p> <p>function mouseDown (ev) {<br/> = EV | | ev window.event;<br/> ET = Ev.srcelement | | Ev.target;</p> <p> if (dragobj) {<br/> return;<br/> }</p> <p ><BR/> var Dragarea = false;<br/> if (Target.getattribute ("Dragarea")) {<br/> dragArea = true;<br/> }</p> <p> while (!target.getattribute ("Isdragobj")) {<br/> if (target.tagname== "HTML") <br/> break;<br/> = target.parentnode;<br/> }</p> <p> if (dragarea && target.getattribute (" Isdragobj ")) {<br/> dragobj = target;<br/> //The purpose of rewriting is to have the current object <br/> at the top Nbsp;document.body.removechild (dragobj); <br/> document.body.appendchild (DRAGOBJ);</p> <p> //record Drag object original position <br/> dragobjoffset.left = dragobj.style.left;<br/> dragobjoffset.top = dragobj.style.top;</p> <p> dragobj.classname = Dragobj.getattribute ("Overclass"); <br/> //The relative position of the mouse in the dragged object <br/> MouseindragobjoffSet = Getmouseoffset (dragobj, ev);</p> <p> draghelper.style.left = DRAGOBJ.STYLE.LEFT;<BR/ > draghelper.style.top = dragobj.style.top;<br/> draghelper.style.width = dragobj.offsetwidth;<br/> draghelper.style.height = dragobj.offsetheight;<br/> draghelper.style.display = "";</p> <p> //alert (dragobj.offsetwidth+ ":" + dragobj.clientwidth); <br/> }<br/>}</p> <p>function mouseUp (ev) {<br/> ev = EV | | window.event;<br/> target = ev.srcelement | | Ev.target;</p> <p> if (dragobj) {<br/> dragobj.style.left = dragHelper.style.left ; <br/> dragobj.style.top = draghelper.style.top;</p> <p> DragHelper.style.display = "None"; <br/> dragobj.classname = Dragobj.getattribute ("Dragclass"); <br/> dragobj = null;<br/> }</p> <p>}</p> <p>function mouseMove (ev) {<br/> ev = EV | | window.event;</ P> <p> if (dragobj) {<br/> var mousepos = mousecoords (ev); <br/> < br/> /*draghelper.style.left = dragobjoffset.left;<br/> draghelper.style.top = dragobjoffset.top;<br/> draghelper.style.width = dragobj.offsetwidth;<br/> DragHelper.style.height = dragobj.offsetheight;<br/> draghelper.style.display = "";*/</p> <p> var windowwidth = document.body.offsetwidth; //window width <br/> var windowheight = document.body.offsetheight; //window height </p> <p> //Drag objects should be in their current position <br/ > var dragobjleft = mousepos.x-mouseindragobjoffset.x;<br/> var dragObjTop = mo Usepos.y-mouseindragobjoffset.y;</p> <p> //Increase judgment,Otherwise drag the object out of the browser window <br/> if (dragobjleft >= 0 && dragobjleft <= windowwidth- dragobj.offsetwidth-20) <br/> dragobj.style.left = dragobjleft;</p> <p> if (dragobjtop >=0) <br/> dragobj.style.top = dragobjtop;</p> <p> repaint (); <br/> }<br/>}</p> Clone object <p>//<br function/> (cloneObject, destobj) {<br/> destobj = Srcobj.clonenode (true); <br/>}</p> <p>function makeDraggable ( Element) {<br/> element.setattribute ("Isdragobj", "Y"); <br/>}</p> <p>function () {<br/> for (i=0; i<dragobjs.length; i++) {<br/> if (dragobjs[i] = = DRAGOBJ) {<br/& Gt dragobjpos = i;<br/> dragobjs[i] = draghelper;<br/> break;<br/> }<br/> }</p> <P> if (dragobjpos>0 && parseint (dragObj.style.top) <parseint (dragobjs[dragobjpos-1].style.top)) {<br/> dragobjs[dragobjpos] = dragobjs[dragobjpos-1];<br/> dragObjs[ DragObjPos-1] = draghelper;<br/> dragobjpos = dragobjpos-1;<br/> }</p> <p>& Nbsp;if (dragobjpos<dragobjs.length-1 && parseint (dragObj.style.top) >parseint (dragobjs[dragobjpos+1 ].style.top)) {<br/> dragobjs[dragobjpos] = dragobjs[dragobjpos+1];<br/> Dragobjs[dragobjpos+1] = draghelper;<br/> dragobjpos = dragobjpos + 1;<br/> }<br-/> paintdragobjs (); <br/> dragobjs[dragobjpos] = dragobj;</p> <p>}</p> <p> function Paintdragobjs () {<br/> var h = 40;<br/> for (i=0; i<dragobjs.length; i++) {<br/> ; dragobjs[i].style.left = 20;<br/> dragobjs[i].stylE.top = h;<br/> h + = dragobjs[i].offsetheight + 10;<br/> }<br/>}</p> <P&G T;function openclose (obj) {<br/> obj.innerhtml = obj.innerhtml== "-"? + ":"-"; <br/> while (obj.tagname!=" Tbody ") {<br/> obj = obj.parentnode;<br/> }</p> <p> for (i=0 i<obj.childnodes.length; i++) {<br/> if ( Obj.childnodes[i].nodename = = "#text" <br/> | | Obj.childnodes[i].getattribute ("Bar")) {continue} <br/> obj.childnodes[i].style.display=obj.childnodes[i].style.display== ""? None ":"; <br/> }</p> <p> paintdragobjs (); <br/>}</p> <p> Document.onmousedown = mousedown;<br/> Document.onmouseup = mouseup;<br/> Document.onmousemove = mouseMove ;</p> <p>window.onload = function () {<br/> var objs = document.getElementsByTagName ("Div"); <br/> for(i=0; i<objs.length; i++) {<br/> var item = Objs.item (i); <br/> ( //if i==1) item.style.height=150;<br/ > if (Item.getattribute ("Overclass")) {<br/> makedraggable (item); <BR/ > dragobjs.push (item); <br/> item.style.left = 20;<br/> item.style.top = initheight;<br/> dragobjtops.push (initHeight); <br/> initheight + + item.offsetheight + 10;<br/> }<br/> }</p> <p >// draghelper = document.createelement (' DIV '); <br/>// draghelper.style.csstext = ' Position: Absolute;display:none; '; <br/>// document.body.appendchild (draghelper) <br-/>}<br/>//--><br/> </SCRIPT ><br/> </HTML></p>
Tip: You can modify some of the code before running
