提示：您可以先修改部分代碼再運行
<p><HTML><br /><HEAD><br /><TITLE> New Document </TITLE><br /><style type="text/css"><br />body<br />{<br /> margin:10px;<br />}</p><p>#dragHelper<br />{<br /> position:absolute;/*重要*/<br /> border:2px dashed #000000;<br /> background-color:#FFFFFF;<br /> filter: alpha(opacity=30);<br />}</p><p>.normal<br />{<br /> position:absolute;/*重要*/<br /> width:300px;<br /> #height:10px;<br /> border:1px solid #666666;<br /> background-color:#FFFFFF;<br />}</p><p>.over<br />{<br /> position:absolute;/*重要*/<br /> width:300px;<br /> #height:10px;<br /> border:1px solid #666666;<br /> background-color:#f3f3f3;<br /> filter: alpha(opacity=50);<br />}</p><p>.dragArea {<br /> CURSOR: move;<br />}</p><p></style><br /></HEAD></p><p><BODY oncontextmenu="window.event.returnValue=false"><br /><input type="text" id="evt" name="eventValue" size="40" /><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 href="#">Cobao</a></td><td dragArea="yes" class="dragArea">........</td><td><a href="#" onclick="openClose(this)">-</a> x</td></tr><br /> <tr><td colspan="3">地址:http://www.cobao.cn</td></tr><br /> <tr><td colspan="3">關鍵字:</td></tr><br /> <tr><td colspan="3">說明:</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>新浪</td><td dragArea="yes" class="dragArea">........</td><td><a href="#" onclick="openClose(this)">-</a> x</td></tr><br /> <tr><td colspan="3">地址:http://www.sina.com.cn</td></tr><br /> <tr><td colspan="3">關鍵字:</td></tr><br /> <tr><td colspan="3">說明:</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>網易</td><td dragArea="yes" class="dragArea">........</td><td><a href="#" onclick="openClose(this)">-</a> x</td></tr><br /> <tr><td colspan="3">地址:http://www.163.com</td></tr><br /> <tr><td colspan="3">關鍵字:</td></tr><br /> <tr><td colspan="3">說明:</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 /> <tr><td colspan="3">地址:http://www.qq.com</td></tr><br /> <tr><td colspan="3">關鍵字:</td></tr><br /> <tr><td colspan="3">說明:</td></tr><br /> </tbody><br /> </table><br /></div></p><p></BODY><br /><SCRIPT LANGUAGE="JavaScript"><br /><!--<br />var dragObjs = []; //可以拖拽的元素數組<br />var dragObjTops = [];</p><p>var dragHelper = document.getElementById("dragHelper"); //拖拽時位置框<br />var dragObj = null; //拖拽對象元素<br />var dragObjPos = 0;</p><p>var dragObjOffset = {left:0,top:0}; //拖拽對象原始位置<br />var mouseInDragObjOffset = {x:0,y:0}; //滑鼠在拖拽對象中的相對位置</p><p>var initHeight = 40;</p><p>Number.prototype.NaN0=function(){return isNaN(this)?0:this;}</p><p>function getPosition(e){ //擷取元素相對文檔的絕對位置<br /> var left = 0;<br /> var top = 0;<br /> while (e.offsetParent){<br /> left += e.offsetLeft;<br /> 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){ //擷取滑鼠相對文檔的絕對位置<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){ // 擷取滑鼠相對元素的相對位置<br /> 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};<br />}</p><p>function mouseDown(ev){<br /> ev = ev || window.event;<br /> target = 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 = target.parentNode;<br /> }</p><p> if(dragArea && target.getAttribute("isDragObj")){<br /> dragObj = target;<br /> //重寫的目的是讓當前對象在最上層<br /> document.body.removeChild(dragObj);<br /> document.body.appendChild(dragObj);</p><p> //記錄下拖拽對象原始位置<br /> dragObjOffset.left = dragObj.style.left;<br /> dragObjOffset.top = dragObj.style.top;</p><p> dragObj.className = dragObj.getAttribute("overClass");<br /> //滑鼠在拖拽對象中的相對位置<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; //視窗寬度<br /> var windowHeight = document.body.offsetHeight; //視窗高度</p><p> //拖拽對象應該所在當前位置<br /> var dragObjLeft = mousePos.x - mouseInDragObjOffset.x;<br /> var dragObjTop = mousePos.y - mouseInDragObjOffset.y;</p><p> //增加判斷，不然拖拽對象拖出瀏覽器視窗<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><p>//複製對象<br />function cloneObject(srcObj, destObj){<br /> destObj = srcObj.cloneNode(true);<br />}</p><p>function makeDraggable(element){<br /> element.setAttribute("isDragObj", "y");<br />}</p><p>function repaint(){<br /> for(i=0; i<dragObjs.length; i++){<br /> if(dragObjs[i] == dragObj){<br /> 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> 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>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>
提示：您可以先修改部分代碼再運行
