javascript实现拖拽并替换网页块元素

找了一些现成的插件，发现都不太符合我的需求，于是参考网上的例子自己实现了一个，还没有优化。

还是贴代码吧：
dragtoreplace
<！DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>DragToReplaceDeom</title> <style> #displayRoom{background:#eee;position:relative;float:left;clear:both;padding:30px 0px 0px 20px;margin-left:20px;margin-top:10px;} .row{display:inline-block;float:left;width:90px;clear:none;top:0;/**//*background:#DFEFFC;*/} .row span{display:inline-block;width:60px;clear:none;background:#9192B1;height:30px;line-height:30px;margin-bottom:30px;text-align:center;} span.usr{cursor:pointer;position:absolute;display:inline-block;width:60px;clear:none;height:30px;line-height:30px;margin-bottom:30px;text-align:center;background:#4DA74D;color:#fff;} span.usr.catch{background:#BD9B33！important;} </style> </head> <body> 学生甲学生乙 学生一 <script type="text/javascript">var curTarget = null; //鼠标拖拽的目标元素 var curPos = null; var dropTarget = null; //要放下的目标元素 var iMouseDown = false; //鼠标是否按下 var lMouseState = false; //前一个iMouseDown状态 var dragreplaceCont = []; var mouseOffset = null; var callbackFunc = null; Number.prototype.NaN0 = function（） { return isNaN（this）？ 0 : this; } function setdragreplace（obj, callback） { dragreplaceCont.push（obj）; obj.setAttribute（"candrag", "1"）; if （callback ！= null && typeof （callback） == "function"） { callbackFunc = callback; } } //鼠标移动 function mouseMove（ev） { ev = ev || window.event; var target = ev.target || ev.srcElement; var mousePos = mouseCoords（ev）; //如果当前元素可拖拽 var dragObj = target.getAttribute（"candrag"）; if （dragObj ！= null） { if （iMouseDown && ！lMouseState） { //刚开始拖拽 curTarget = target; curPos = getPosition（target）; mouseOffset = getMouseOffset（target, ev）; // 清空辅助层 for （var i = 0; i < dragHelper.childNodes.length; i++） dragHelper.removeChild（dragHelper.childNodes[i]）; //克隆元素到辅助层，并移动到鼠标位置 dragHelper.appendChild（curTarget.cloneNode（true））; dragHelper.style.display = "block"; dragHelper.firstChild.removeAttribute（"candrag"）; //记录拖拽元素的位置信息 curTarget.setAttribute（"startWidth", parseInt（curTarget.offsetWidth））; curTarget.setAttribute（"startHeight", parseInt（curTarget.offsetHeight））; curTarget.style.display = "none"; //记录每个可接纳元素的位置信息，这里一次记录以后多次调用，获取更高性能 for （var i = 0; i < dragreplaceCont.length; i++） { with （dragreplaceCont[i]） { if （dragreplaceCont[i] == curTarget） continue; var pos = getPosition（dragreplaceCont[i]）; setAttribute（"startWidth", parseInt（offsetWidth））; setAttribute（"startHeight", parseInt（offsetHeight））; setAttribute（"startLeft", pos.x）; setAttribute（"startTop", pos.y）; } } //记录end } //刚开始拖拽end } //正在拖拽 if （curTarget ！= null） { // move our helper div to wherever the mouse is （adjusted by mouseOffset） dragHelper.style.top = mousePos.y - mouseOffset.y + "px"; dragHelper.style.left = mousePos.x - mouseOffset.x + "px"; //拖拽元素的中点 var xPos = mousePos.x - mouseOffset.x + （parseInt（curTarget.getAttribute（"startWidth"）） / 2）; var yPos = mousePos.y - mouseOffset.y + （parseInt（curTarget.getAttribute（"startHeight"）） / 2）; var havedrop = false; for （var i = 0; i < dragreplaceCont.length; i++） { with （dragreplaceCont[i]） { if （dragreplaceCont[i] == curTarget） continue; if （（parseInt（getAttribute（"startLeft"）） < xPos） && （parseInt（getAttribute（"startTop"）） < yPos） && （（parseInt（getAttribute（"startLeft"）） + parseInt（getAttribute（"startWidth"））） > xPos） && （（parseInt（getAttribute（"startTop"）） + parseInt（getAttribute（"startHeight"））） > yPos）） { havedrop = true; dropTarget = dragreplaceCont[i]; dropTarget.className = "usr catch"; break; } } } if （！havedrop && dropTarget ！= null） { dropTarget.className = "usr"; dropTarget = null; } } //正在拖拽end lMouseState = iMouseDown; if （curTarget） return false; //阻止其它响应（如：鼠标框选文本） } //鼠标松开 function mouseUp（ev） { if （curTarget） { dragHelper.style.display = "none"; //隐藏辅助层 if （curTarget.style.display == "none" && dropTarget ！= null） { //有元素接纳，两者互换 var destP = dropTarget.parentNode; var sourceP = curTarget.parentNode; destP.appendChild（curTarget）; sourceP.appendChild（dropTarget）; dropTarget.className = "usr"; dropTarget = null; if （callbackFunc ！= null） { callbackFunc（curTarget）; } } curTarget.style.display = ""; curTarget.style.visibility = "visible"; curTarget.setAttribute（"candrag", "1"）; } curTarget = null; iMouseDown = false; } //鼠标按下 function mouseDown（ev） { //记录变量状态 iMouseDown = true; //获取事件属性 ev = ev || window.event; var target = ev.target || ev.srcElement; if （target.onmousedown || target.getAttribute（"candrag"）） {//阻止其它响应（如：鼠标双击文本） return false; } } //返回当前item相对页面左上角的坐标 function getPosition（e） { var left = 0; var top = 0; while （e.offsetParent） { left += e.offsetLeft + （e.currentStyle ？（parseInt（e.currentStyle.borderLeftWidth））.NaN0（） : 0）; top += e.offsetTop + （e.currentStyle ？（parseInt（e.currentStyle.borderTopWidth））.NaN0（） : 0）; e = e.offsetParent; } left += e.offsetLeft + （e.currentStyle ？（parseInt（e.currentStyle.borderLeftWidth））.NaN0（） : 0）; top += e.offsetTop + （e.currentStyle ？（parseInt（e.currentStyle.borderTopWidth））.NaN0（） : 0）; return { x: left, y: top }; } //返回鼠标相对页面左上角的坐标 function mouseCoords（ev） { if （ev.pageX || ev.pageY） { return { x: ev.pageX, y: ev.pageY }; } return { x: ev.clientX + document.body.scrollLeft - document.body.clientLeft, y: ev.clientY + document.body.scrollTop - document.body.clientTop }; } //鼠标位置相对于item的偏移量 function getMouseOffset（target, ev） { ev = ev || window.event; var docPos = getPosition（target）; var mousePos = mouseCoords（ev）; return { x: mousePos.x - docPos.x, y: mousePos.y - docPos.y }; } window.onload = function（） { document.onmousemove = mouseMove; document.onmousedown = mouseDown; document.onmouseup = mouseUp; //辅助层用来显示拖拽 dragHelper = document.createElement（"DIV"）; dragHelper.style.cssText = "position:absolute;display:none;"; document.body.appendChild（dragHelper）; setdragreplace（document.getElementById（"345"））; setdragreplace（document.getElementById（"123"））; setdragreplace（document.getElementById（"456"））; }; </script> </body> </html>
[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]