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

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

 
还是贴代码吧：
dragtoreplace

DragToReplaceDeom

#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;}

学生甲

学生乙

学生一

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 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'));
};

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]