拖拽（待完善版）

<!doctype html > <html > <head > <meta charset="gb2312" / > <title > </title > <meta name="description" content=" " > <meta name="keywords" content=" " > </head > <body > <style> *{padding:0;margin:0;border:0;} body {margin:0; padding:0; font:12px "\5B8B\4F53",san-serif;background:#ffffff;} div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,blockquote,p,i{margin:0;padding:0;} img{border:none; vertical-align:middle} em,strong{font-style:normal;font-weight:normal;} ul,li{list-style-type:none;} #test{margin:50px;} #test li{float:left;156px;border:1px solid #ccc;height:228px;margin-right:10px;margin-bottom:10px;} #test li img{margin:3px;} #test li h2{height:22px;background-color:#ccc;font-family:arial,verdana,sans-serif;font-size:12px;line-height:22px;padding-left:5px;} </style> <ul id="test" > <li > <h2 title="拖拽我">darg me</h2> <div><img border="0" src="http://static1.mtime.cn/feature/2012/15sh/images/mp.jpg"></div> </li > <li > <h2 title="拖拽我">darg me</h2> <div><img width="150" border="0" height="200" src="http://static1.mtime.cn/feature/2012/15sh/images/hxm.jpg"></div> </li > <li > <h2 title="拖拽我">darg me</h2> <div><img border="0" src="http://static1.mtime.cn/feature/2012/15sh/images/lbb.jpg"></div> </li > <li > <h2 title="拖拽我">darg me</h2> <div><img border="0" src="http://static1.mtime.cn/feature/2012/15sh/images/lcw.jpg"></div> </li > <li > <h2 title="拖拽我">darg me</h2> <div><img border="0" src="http://static1.mtime.cn/feature/2012/15sh/images/hcy.jpg"></div> </li > <li > <h2 title="拖拽我">darg me</h2> <div><img width="150" border="0" height="200" src="http://static1.mtime.cn/feature/2012/15sh/images/lyf2.jpg"></div> </li > <li > <h2 title="拖拽我">darg me</h2> <div><img border="0" src="http://static1.mtime.cn/feature/2012/15sh/images/zw.jpg"></div> </li > <li > <h2 title="拖拽我">darg me</h2> <div><img border="0" src="http://static1.mtime.cn/feature/2012/15sh/images/hqs.jpg"></div> </li > <li > <h2 title="拖拽我">darg me</h2> <div><img border="0" src="http://static1.mtime.cn/feature/2012/15sh/images/mp.jpg"></div> </li > <li > <h2 title="拖拽我">darg me</h2> <div><img width="150" border="0" height="200" src="http://static1.mtime.cn/feature/2012/15sh/images/hxm.jpg"></div> </li > <li > <h2 title="拖拽我">darg me</h2> <div><img border="0" src="http://static1.mtime.cn/feature/2012/15sh/images/lbb.jpg"></div> </li > <li > <h2 title="拖拽我">darg me</h2> <div><img border="0" src="http://static1.mtime.cn/feature/2012/15sh/images/lcw.jpg"></div> </li > <li > <h2 title="拖拽我">darg me</h2> <div><img border="0" src="http://static1.mtime.cn/feature/2012/15sh/images/hcy.jpg"></div> </li > <li > <h2 title="拖拽我">darg me</h2> <div><img width="150" border="0" height="200" src="http://static1.mtime.cn/feature/2012/15sh/images/lyf2.jpg"></div> </li > <li > <h2 title="拖拽我">darg me</h2> <div><img border="0" src="http://static1.mtime.cn/feature/2012/15sh/images/zw.jpg"></div> </li > <li > <h2 title="拖拽我">darg me</h2> <div><img border="0" src="http://static1.mtime.cn/feature/2012/15sh/images/hqs.jpg"></div> </li > </ul > <script > var Drag = { "obj": null, //a拖拽头 "init": function(a, b, e) { //a拖拽目标比如头 b整个拖拽对象 if (e == null) { a.onmousedown = Drag.start; } //初始化 a.root = b; if (isNaN(parseInt(a.root.style.left))) a.root.style.left = "0px"; //重置为0 if (isNaN(parseInt(a.root.style.top))) a.root.style.top = "0px"; a.root.onDragStart = new Function(); a.root.onDragEnd = new Function(); a.root.onDrag = new Function(); if (e != null) { //e是什么东东 var a = Drag.obj = a; //错误 e = Drag.fixe(e); var c = parseInt(a.root.style.top); var d = parseInt(a.root.style.left); a.root.onDragStart(d, c, e.pageX, e.pageY); //左上角和鼠标位置 a.lastMouseX = e.pageX; a.lastMouseY = e.pageY; document.onmousemove = Drag.drag; document.onmouseup = Drag.end; } }, "start": function(e) { //if (RC.is_locked) return; //如果锁定 var a = Drag.obj = this; e = Drag.fixEvent(e); var b = parseInt(a.root.style.top); var c = parseInt(a.root.style.left); a.root.onDragStart(c, b, e.pageX, e.pageY); //把left top pageX pageY 传给onDragStart a.lastMouseX = e.pageX; a.lastMouseY = e.pageY; document.onmousemove = Drag.drag; document.onmouseup = Drag.end; return false; }, "drag": function(e) { e = Drag.fixEvent(e); var a = Drag.obj; var b = e.pageY; var c = e.pageX; var d = parseInt(a.root.style.top); var f = parseInt(a.root.style.left); var g, currentTop; g = f + c - a.lastMouseX; currentTop = d + (b - a.lastMouseY); //a.root.style.left = g + "px"; a.root.style.top = currentTop + "px"; a.lastMouseX = c; a.lastMouseY = b; a.root.onDrag(g, currentTop, e.pageX, e.pageY); return false; }, "end": function() { document.onmousemove = null; document.onmouseup = null; Drag.obj.root.onDragEnd(parseInt(Drag.obj.root.style.left), parseInt(Drag.obj.root.style.top)); Drag.obj = null; }, "fixEvent": function(e) { if (typeof e == "undefined") e = window.event; if (typeof e.layerX == "undefined") e.layerX = e.offsetX; if (typeof e.layerY == "undefined") e.layerY = e.offsetY; if (typeof e.pageX == "undefined") e.pageX = e.clientX + document.body.scrollLeft - document.body.clientLeft; if (typeof e.pageY == "undefined") e.pageY = e.clientY + document.body.scrollTop - document.body.clientTop; return e; } } function findPosX(a) { var b = 0; if (a && a.offsetParent) { while (a.offsetParent) { b += a.offsetLeft; a = a.offsetParent; } } else if (a && a.x) b += a.x; return b; } function findPosY(a) { var b = 0; if (a && a.offsetParent) { while (a.offsetParent) { b += a.offsetTop; a = a.offsetParent; } } else if (a && a.y) b += a.y; return b; } var RC={} RC._c=function (a){ return document.createElement(a) } var test=document.getElementById('test'); var nodes = test.getElementsByTagName("li"); for(var i=0;i <nodes.length;i++){ var li = nodes[i]; dragItem(li.getElementsByTagName("h2")[0],li); } //拖动条目 function dragItem(a,item){ var diffTemp=[], parent=item.parentNode, nodes=parent.getElementsByTagName("LI"), currIndex=0, oh=item.offsetHeight/2, ow=item.offsetWidth/2, mwDragGhost=(function (){ //虚线框 var g=RC._c('LI'); g.style.cssText='border:2px dashed #797979;156px;height: 226px; margin-bottom: 10px; margin-right: 10px;'; return g; }()), insertAfter=function(c, d) { var b = d.parentNode; if (b.lastChild == d) { b.appendChild(c); } else { b.insertBefore(c, d.nextSibling) } }, getIndex=function (arr,obj){ for(var j=0,len=arr.length; j <len; j++) { if (arr[j]===obj) { return j; } } }, getMinInstance=function(mouseX,mouseY,self){ //获取最小距离 var arr=[],i=0,min, getInstance=function (x,y){ //console.log("x:"+x,"y:"+y,"mouseX:"+mouseX,"mouseY:"+mouseY); return Math.sqrt(Math.pow(mouseX-x,2)+Math.pow(mouseY-y,2)); }; currIndex=getIndex(nodes,self); for(; i <nodes.length; i++) { if (i===currIndex) {arr[i]=Number.MAX_VALUE;continue} arr[i]=getInstance(findPosX(nodes[i])+ow,findPosY(nodes[i])+oh); } min= Math.min.apply(Math,arr); return getIndex(arr,min); }; Drag.init(a,item); item.onDragStart = function(left,top,mouseX,mouseY){ // a.root.onDragStart(d, c, e.pageX, e.pageY); //元素左元素上和鼠标位置 this.style.opacity = "0.5"; this.style.filter = "alpha(opacity=50)"; this.style.cursor = "move"; this.style.left = (findPosX(this) - 5) + "px"; this.style.top = (findPosY(this) - 5) + "px"; this.style.position = "absolute"; this.style.zIndex = 100; if (!+'\v1') { this.setCapture(); } else { window.captureEvents(Event.mousemove); } diffTemp[0]=mouseX-parseInt(this.style.left); diffTemp[1]=mouseY-parseInt(this.style.top); parent.insertBefore(mwDragGhost,this); }; item.onDrag = function(left,top,mouseX,mouseY){ ////左上角和鼠标位置 this.style.left = mouseX-diffTemp[0] + "px"; this.style.top = mouseY-diffTemp[1]+ "px"; var minIndex=getMinInstance(mouseX,mouseY,this), ghostIndex=getIndex(nodes,mwDragGhost), obj=nodes[minIndex]; if (obj!==mwDragGhost) { if (ghostIndex <minIndex) { insertAfter(mwDragGhost,obj); }else{ parent.insertBefore(mwDragGhost,obj); } } }; item.onDragEnd = function(left,top,mouseX,mouseY){ this.style.opacity = ""; this.style.filter = ""; this.style.cursor = ""; this.style.position = ""; this.style.zIndex = ""; if (!+'\v1') { this.releaseCapture(); } else { window.releaseEvents(Event.mousemove); } parent.replaceChild(this,mwDragGhost); }; } </script > </body > </html >