网页拖动模块，加减号收缩和展开，Js仿Google和Windows Live的拖拽，不但实现了网页模块的拖动，还可关闭、展开、收缩层窗口，自动排序，拖拽的时候自动吸附到落点上，自动把位置排列整齐，很是佩服作者啦。 示例： <HTML><br /> <HEAD><br /> <TITLE>仿Google和Windows Live的拖拽</TITLE><br /> <style type="text/css"><br /> body<br /> {<br /> margin:10px;<br /> }<br /> #dragHelper<br /> {<br /> position:absolute;/*重要*/<br /> border:2px dashed #000000;<br /> background-color:#FFFFFF;<br /> filter: alpha(opacity=30);<br /> }<br /> .normal<br /> {<br /> position:absolute;/*重要*/<br /> width:300px;<br /> #height:10px;<br /> border:1px solid #666666;<br /> background-color:#FFFFFF;<br /> }<br /> .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 /> }<br /> .dragArea {<br /> CURSOR: move;<br /> }<br /> </style><br /> </HEAD><br /> <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="#">baidu.com</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.baidu.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>新浪</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.veryhuo.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><br /> </BODY><br /> <SCRIPT LANGUAGE="<b>Java</b>Script"><br /> <!--<br /> var dragObjs = [];//可以拖拽的元素数组<br /> var dragObjTops = [];<br /> var dragHelper = document.getElementById("dragHelper");//拖拽时位置框<br /> var dragObj = null;//拖拽对象元素<br /> var dragObjPos = 0;<br /> var dragObjOffset = {left:0,top:0};//拖拽对象原始位置<br /> var mouseInDragObjOffset = {x:0,y:0};//鼠标在拖拽对象中的相对位置<br /> var initHeight = 40;<br /> Number.prototype.NaN0=function(){return isNaN(this)?0:this;}<br /> 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 /> }<br /> left += e.offsetLeft;<br /> top += e.offsetTop;<br /> return {x:left, y:top};<br /> }<br /> 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 /> }<br /> // Resources from http://www.veryhuo.com/down<br /> function getMouseOffset(target, ev){//获取鼠标相对元素的相对位置<br /> ev = ev || window.event;<br /> var elementPos = getPosition(target);<br /> var mousePos = mouseCoords(ev);<br /> return {x:mousePos.x - elementPos.x, y:mousePos.y - elementPos.y};<br /> }<br /> function mouseDown(ev){<br /> ev = ev || window.event;<br /> target = ev.srcElement || ev.target;<br /> if(dragObj){<br /> return;<br /> }<br /> var dragArea = false;<br /> if(target.getAttribute("dragArea")){<br /> dragArea = true;<br /> }<br /> while(!target.getAttribute("isDragObj")){<br /> if(target.tagName=="HTML")<br /> break;<br /> target = target.parentNode;<br /> }<br /> if(dragArea && target.getAttribute("isDragObj")){<br /> dragObj = target;<br /> //重写的目的是让当前对象在最上层<br /> document.body.removeChild(dragObj);<br /> document.body.appendChild(dragObj);<br /> //记录下拖拽对象原始位置<br /> dragObjOffset.left = dragObj.style.left;<br /> dragObjOffset.top = dragObj.style.top;<br /> dragObj.className = dragObj.getAttribute("overClass");<br /> //鼠标在拖拽对象中的相对位置<br /> mouseInDragObjOffset = getMouseOffset(dragObj, ev);<br /> 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 = "";<br /> //alert(dragObj.offsetWidth+":"+dragObj.clientWidth);<br /> }<br /> }<br /> function mouseUp(ev){<br /> ev = ev || window.event;<br /> target = ev.srcElement || ev.target;<br /> if(dragObj){<br /> dragObj.style.left = dragHelper.style.left;<br /> dragObj.style.top = dragHelper.style.top;<br /> dragHelper.style.display = "none";<br /> dragObj.className = dragObj.getAttribute("dragClass");<br /> dragObj = null;<br /> }<br /> }<br /> function mouseMove(ev){<br /> ev = ev || window.event;<br /> if(dragObj) {<br /> var mousePos = mouseCoords(ev);<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 = "";*/<br /> var windowWidth = document.body.offsetWidth;//窗口宽度<br /> var windowHeight = document.body.offsetHeight;//窗口高度<br /> //拖拽对象应该所在当前位置<br /> var dragObjLeft = mousePos.x - mouseInDragObjOffset.x;<br /> var dragObjTop = mousePos.y - mouseInDragObjOffset.y;<br /> //增加判断，不然拖拽对象拖出浏览器窗口<br /> if(dragObjLeft >= 0 && dragObjLeft <= windowWidth - dragObj.offsetWidth - 20)<br /> dragObj.style.left = dragObjLeft;<br /> if(dragObjTop >=0)<br /> dragObj.style.top = dragObjTop;<br /> repaint();<br /> }<br /> }<br /> //克隆对象<br /> function cloneObject(srcObj, destObj){<br /> destObj = srcObj.cloneNode(true);<br /> }<br /> function makeDraggable(element){<br /> element.setAttribute("isDragObj", "y");<br /> }<br /> 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 /> }<br /> 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 /> }<br /> 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;<br /> }<br /> 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 /> }<br /> function openClose(obj){<br /> obj.innerHTML = obj.innerHTML=="-"?"+":"-";<br /> while(obj.tagName != "TBODY"){<br /> obj = obj.parentNode;<br /> }<br /> 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 /> }<br /> paintDragObjs();<br /> }<br /> document.onmousedown = mouseDown;<br /> document.onmouseup = mouseUp;<br /> document.onmousemove = mouseMove;<br /> 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 /> }<br /> // dragHelper = document.createElement('DIV');<br /> // dragHelper.style.cssText = 'position:absolute;display:none;';<br /> // document.body.appendChild(dragHelper);<br /> }<br /> //--><br /> </SCRIPT><br /> </HTML> <br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>提示：可修改后代码再运行! 文章导航 JavaScript实现网页上的模块可用鼠标拖放Js控制DIV高度，兼容FireFox浏览器
