JS+CSS制作的DIV层最小化和随意拖拽排序功能丨芯晴网页特效丨CsrCode.CN <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 /> 百度 点此拖动 - x 地址:http://www.baidu.com 关键字: 说明: 新浪 ........ - x 地址:http://www.sina.com.cn 关键字: 说明: 网页特效 ........ - x 地址：http://www.CsrCode.cn 关键字: 说明: 七彩影视 ........ - x 地址：http://www.33567.cn 关键字: 说明: <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 /> 本特效由 芯晴网页特效丨CsrCode.Cn 收集于互联网，只为兴趣与学习交流，不作商业用途。
