方法一： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; -moz-user-select:none;} ul{ margin: 100px; border: 1px solid #adff2f; list-style: none;} li{ height: 30px; line-height: 30px; padding: 0; list-style: none;} li:hover{ background: #bdb76b; cursor: move;} </style> </head> <body> <ul id="outer_wrap"> <li>第一条</li> <li>第二条</li> <li>第三条</li> <li>第四条</li> <li>第五条</li> <li>第六条</li> <li>第七条</li> <li>第八条</li> </ul> <script type="text/javascript"> function $(id){ return document.getElementById(id); } //获取鼠标位置 function getMousePos(e){ return { x : e.pageX || e.clientX + document.body.scrollLeft, y : e.pageY || e.clientY + document.body.scrollTop } } //获取元素位置 function getElementPos(el){ return { x : el.offsetParent ? el.offsetLeft + arguments.callee(el.offsetParent)['x'] : el.offsetLeft, y : el.offsetParent ? el.offsetTop + arguments.callee(el.offsetParent)['y'] : el.offsetTop } } //获取元素尺寸 function getElementSize(el){ return { width : el.offsetWidth, height : el.offsetHeight } } //禁止选择 document.onselectstart = function(){ return false; } //判断是否有挪动 var MOVE = {}; MOVE.isMove = false; //就是创建的标杆 var div = document.createElement('div'); div.style.width = '400px'; div.style.height = '1px'; div.style.fontSize = '0'; div.style.background = 'red'; var outer_wrap = $('outer_wrap'); outer_wrap.onmousedown = function(event){ //获取列表顺序 var lis = outer_wrap.getElementsByTagName('li'); for(var i = 0; i < lis.length; i++){ lis[i]['pos'] = getElementPos(lis[i]); lis[i]['size'] = getElementSize(lis[i]); } event = event || window.event; var t = event.target || event.srcElement; if(t.tagName.toLowerCase() == 'li'){ var p = getMousePos(event); var el = t.cloneNode(true); el.style.position = 'absolute'; el.style.left = t.pos.x + 'px'; el.style.top = t.pos.y + 'px'; el.style.width = t.size.width + 'px'; el.style.height = t.size.height + 'px'; el.style.border = '1px solid #d4d4d4'; el.style.background = '#d4d4d4'; el.style.opacity = '0.7'; document.body.appendChild(el); document.onmousemove = function(event){ event = event || window.event; var current = getMousePos(event); el.style.left =t.pos.x + current.x - p.x + 'px'; el.style.top =t.pos.y + current.y - p.y+ 'px'; document.body.style.cursor = 'move'; //判断插入点 for(var i = 0; i < lis.length; i++){ if(current.x > lis[i]['pos']['x'] && current.x < lis[i]['pos']['x'] + lis[i]['size']['width'] && current.y > lis[i]['pos']['y'] && current.y < lis[i]['pos']['y'] + lis[i]['size']['height']/2){ if(t != lis[i]){ MOVE.isMove = true; outer_wrap.insertBefore(div,lis[i]); } }else if(current.x > lis[i]['pos']['x'] && current.x < lis[i]['pos']['x'] + lis[i]['size']['width'] && current.y > lis[i]['pos']['y'] + lis[i]['size']['height']/2 && current.y < lis[i]['pos']['y'] + lis[i]['size']['height']){ if(t != lis[i]){ MOVE.isMove = true; outer_wrap.insertBefore(div,lis[i].nextSibling); } } } } //移除事件 document.onmouseup = function(event){ event = event || window.event; document.onmousemove = null; if(MOVE.isMove){ outer_wrap.replaceChild(t,div); MOVE.isMove = false; } document.body.removeChild(el); el = null; document.body.style.cursor = 'normal'; document.onmouseup = null; } } } </script> </body> </html> 方法二： <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>Js实现无刷新添加新层，拖动DIV层可互换位置丨芯晴网页特效丨CsrCode.Cn</title> <style> body {margin:0px;padding:0px;font-size:12px;text-align:center;} body > div {text-align:center; margin-right:auto; margin-left:auto;} .content{width:900px;} .content .left{ float:left; width:20%; border:1px solid #0066CC; margin:3px; } .content .center{float:left;border:1px solid #FF0000;margin:3px;width:57%} .content .right{float:right;width:20%;border:1px solid #FF00FF;margin:3px} .mo{height:auto;border:1px solid #CCC;margin:3px;background:#FFF} .mo h1{background:#ECF9FF;height:18px;padding:3px;cursor:move} .closediv{cursor:default;} .minusspan{cursor:default;} .mo .nr{height:80px;border:1px solid #F3F3F3;margin:2px} h1{margin:0px;padding:0px;text-align:left;font-size:12px} .dragging { FILTER: progid:DXImageTransform.Microsoft.Alpha(opacity=60); opacity: 0.6; moz-opacity: 0.6 } </style> <script language="javascript"> var dragobj={} window.onerror=function(){return false} var domid=12 function on_ini(){ String.prototype.inc=function(s){return this.indexOf(s)>-1?true:false} var agent=navigator.userAgent window.isOpr=agent.inc("Opera") window.isIE=agent.inc("IE") && !isOpr window.isMoz=agent.inc("Mozilla") && !isOpr && !isIE if(isMoz){ Event.prototype.__defineGetter__("x",function(){return this.clientX+2}) Event.prototype.__defineGetter__("y",function(){return this.clientY+2}) } basic_ini() } function basic_ini(){ window.$=function(obj){return typeof(obj)=="string"?document.getElementById(obj):obj} window.oDel=function(obj){if($(obj)!=null){$(obj).parentNode.removeChild($(obj))}} } window.oDel=function(obj){if($(obj)!=null){$(obj).parentNode.removeChild($(obj))}} window.onload=function(){ on_ini() var o=document.getElementsByTagName("h1") for(var i=0;i<o.length;i++){ o[i].onmousedown=addevent; //添加折叠和关闭按钮 var tt = document.createElement("div"); tt.style.cssText = "float:left"; var span = document.createElement("span"); span.innerHTML = "--"+o[i].innerHTML; span.style.cssText = "cursor:default;"; span.onmousedown = minusDiv; tt.appendChild(span); var close = document.createElement("div"); close.innerHTML = "X"; close.style.cssText = "cursor:default;float:right"; close.onmousedown = closeDiv; o[i].innerHTML = ""; o[i].appendChild(tt); o[i].appendChild(close); } } //折叠或者显示层 function minusDiv(e) { e=e||event var nr = this.parentNode.parentNode.nextSibling; //取得内容层 nr.style.display = nr.style.display==""?"none":""; } //移出层 function closeDiv(e) { e=e||event var mdiv = this.parentNode.parentNode; //取得目标层 oDel(mdiv); } function addevent(e){ if(dragobj.o!=null) return false e=e||event dragobj.o=this.parentNode dragobj.xy=getxy(dragobj.o) dragobj.xx=new Array((e.x-dragobj.xy[1]),(e.y-dragobj.xy[0])) //dragobj.o.className = 'dragging'; dragobj.o.style.width=dragobj.xy[2]+"px" dragobj.o.style.height=dragobj.xy[3]+"px" dragobj.o.style.left=(e.x-dragobj.xx[0])+"px" dragobj.o.style.top=(e.y-dragobj.xx[1])+"px" dragobj.o.style.position="absolute" dragobj.o.style.filter='alpha(opacity=60)'; //添加拖动透明效果 var om=document.createElement("div") dragobj.otemp=om om.style.width=dragobj.xy[2]+"px" om.style.height=dragobj.xy[3]+"px" om.style.border = "1px dashed red"; //ikaiser添加，实现虚线框 dragobj.o.parentNode.insertBefore(om,dragobj.o) return false } document.onselectstart=function(){return false} window.onfocus=function(){document.onmouseup()} window.onblur=function(){document.onmouseup()} document.onmouseup=function(){ if(dragobj.o!=null){ dragobj.o.style.width="auto" dragobj.o.style.height="auto" dragobj.otemp.parentNode.insertBefore(dragobj.o,dragobj.otemp) dragobj.o.style.position="" oDel(dragobj.otemp) dragobj={} } } document.onmousemove=function(e){ e=e||event if(dragobj.o!=null){ dragobj.o.style.left=(e.x-dragobj.xx[0])+"px" dragobj.o.style.top=(e.y-dragobj.xx[1])+"px" createtmpl(e, dragobj.o) //传递当前拖动对象 } } function getxy(e){ var a=new Array() var t=e.offsetTop; var l=e.offsetLeft; var w=e.offsetWidth; var h=e.offsetHeight; while(e=e.offsetParent){ t+=e.offsetTop; l+=e.offsetLeft; } a[0]=t;a[1]=l;a[2]=w;a[3]=h return a; } function inner(o,e){ var a=getxy(o) if(e.x>a[1] && e.x<(a[1]+a[2]) && e.y>a[0] && e.y<(a[0]+a[3])){ if(e.y<(a[0]+a[3]/2)) return 1; else return 2; }else return 0; } //将当前拖动层在拖动时可变化大小，预览效果 function createtmpl(e, elm){ for(var i=0;i<domid;i++){ if(document.getElementById("m"+i) == null) //已经移出的层不再遍历 continue; if($("m"+i)==dragobj.o) continue var b=inner($("m"+i),e) if(b==0) continue dragobj.otemp.style.width=$("m"+i).offsetWidth elm.style.width = $("m"+i).offsetWidth; //1为下移，2为上移 if(b==1){ $("m"+i).parentNode.insertBefore(dragobj.otemp,$("m"+i)) }else{ if($("m"+i).nextSibling==null){ $("m"+i).parentNode.appendChild(dragobj.otemp) }else{ $("m"+i).parentNode.insertBefore(dragobj.otemp,$("m"+i).nextSibling) } } return } for(var j=0;j<3;j++){ if($("dom"+j).innerHTML.inc("div")||$("dom"+j).innerHTML.inc("DIV")) continue var op=getxy($("dom"+j)) if(e.x>(op[1]+10) && e.x<(op[1]+op[2]-10)){ $("dom"+j).appendChild(dragobj.otemp) dragobj.otemp.style.width=(op[2]-10)+"px" } } } function add_div() { var o=document.createElement("div") o.className="mo" o.id="m"+domid $('dom0').appendChild(o) o.innerHTML="<h1>dom"+domid+"</h1><div class="nr"></div>" o.getElementsByTagName("h1")[0].onmousedown=addevent domid++ } </script> </head> <body> <INPUT TYPE="button" value="添加一个新的DIV层" onclick="add_div();"> <div class="content"> <div class="left" id=dom0> <div class="mo" id=m0> <h1>dom0</h1> <div class="nr"></div> </div> <div class="mo" id=m1> <h1>dom1</h1><div class="nr"></div> </div> <div class="mo" id=m2><h1>dom2</h1><div class="nr"></div></div> </div> <div class="center" id=dom1> <div class="mo" id=m3><h1>dom3</h1><div class="nr"></div></div> <div class="mo" id=m4><h1>dom4</h1><div class="nr"></div></div> <div class="mo" id=m5><h1>dom5</h1><div class="nr"></div></div> </div> <div class="right" id=dom2> <div class="mo" id=m6><h1>dom6</h1><div class="nr"></div></div> <div class="mo" id=m7><h1>dom7</h1><div class="nr"></div></div> </div> </div> </body> </html>