<div class="codetitle"> <span><a style="CURSOR: pointer" data="28260" class="copybut" id="copybut28260" onclick="doCopy('code28260')"><u>复制代码</u></a></span> 代码如下:</div> <div class="codebody" id="code28260"> <br> <br> <br><title>JS+CSS制作的DIV层最小化和随意拖拽排序功能</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> <br> <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>百度</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.CsrCode.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.33567.cn</td></tr> <br><tr><td colspan="3">关键字:</td></tr> <br><tr><td colspan="3">说明:</td></tr> <br> </tbody> <br> </table> <br> </div> <br> <br><script language="JavaScript"> <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>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> <br> </div>
