javascript之鼠标拖动位置互换效果代码

鼠标拖动，位置互换效果，主要用于div，提高用户体验等方面





div.box{
position:relative;
padding:5px;
background-color:#000;
width:300px;
height:300px;
overflow:hidden;
}
div.box div.item{
float:left;
width:90px;
height:90px;
background-color:#ccc;
margin:5px;
position:relative;
cursor:pointer;
}
div.mask{
width:90px;
height:90px;
background-color:#f00;
opacity:0.8;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);
position:absolute;
visibility:hidden;
top:20px;
left:20px;
z-index:10;
}


var darg = {
target : null,
ox : 0,
oy : 0
};
var box = document.createElement("div");
box.className = "box";
var mask = document.createElement("div");
mask.className = "mask";
box.appendChild(mask);
for(var i = 0; i < 9; i ++){
var item = document.createElement("div");
item.className = "item";
item.appendChild(document.createTextNode(i + 1));
item.onmousedown = function(){
var e = arguments[0] || window.event;
var o = e.target || e.srcElement;
darg.target = o;
mask.style["top"] = o.offsetTop + "px";
mask.style["left"] = o.offsetLeft + "px";
mask.style["visibility"] = "visible";
darg.ox = e.clientX - mask.offsetLeft;
darg.oy = e.clientY - mask.offsetTop;
}
box.appendChild(item);
}
document.body.appendChild(box);
function getItem(x,y){
x = x - box.offsetLeft;
y = y - box.offsetTop;
var o = box.childNodes[(3 - parseInt((box.offsetWidth - x)/100) + (2 - parseInt((box.offsetHeight - y)/100)) * 3)];
var n = darg.target.nextSibling;
var on = o.nextSibling;
box.insertBefore(o,n);
box.insertBefore(darg.target,on);
}
document.onmousemove = function(){
if(darg.target != null && darg.target.nodeType == 1){
var e = arguments[0] || window.event;
mask.style["left"] = e.clientX - darg.ox + "px";
mask.style["top"] = e.clientY - darg.oy + "px";
}
}
box.onmouseup = function(){
if(darg.target != null && darg.target.nodeType == 1){
var e = arguments[0] || window.event;
var o = e.target || e.srcElement;
getItem(e.clientX,e.clientY);
darg.target = null;
}
}

document.onmouseup = function(){
darg.target = null;
mask.style["visibility"] = "hidden";
}



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