<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>1231</title>
<style type="text/css">
*{margin:0;padding:0;}
ul,li{list-style-type:none;}
a{text-decoration:none;}
a:hover{text-decoration:underline;}
img{border:0;}
.wrapper{700px;margin:10px auto;}
.top{height:40px;text-align:center;line-height:40px;}
.content ul{float:left;}
.content li{200px;height:100px;margin:3px;border:1px solid red;}
.content p{height:20px;background:#ccc;cursor:move;}
</style>
</head>
<body>
<div class="wrapper">
<div class="top"><h1>drag</h1></div>
<div class="content" id = "drag">
<ul>
<li><p>demo0</p></li>
<li><p>demo1</p></li>
<li><p>demo2</p></li>
</ul>
<ul>
<li><p>demo3</p></li>
<li><p>demo4</p></li>
<li><p>demo5</p></li>
</ul>
<ul>
<li><p>demo6</p></li>
<li><p>demo7</p></li>
<li><p>demo8</p></li>
</ul>
</div>
</div>
<script type="text/javascript">
window.onload = function(){
var drag = document.getElementById("drag"),
oPara = drag.getElementsByTagName("p"),
oLi = drag.getElementsByTagName("li"),
dragObj = {};
for(var i=0,len=oPara.length;i<len;i++){
oPara[i].onmousedown = function(e){
if(dragObj.o != null){ return false;}
dragObj.o = this.parentNode;
var data = getXY(dragObj.o),
e = e || window.event;
dragObj.xx = [(e.clientX - data[0]),(e.clientY-data[1])];
dragObj.o.style.left = e.clientX - dragObj.xx[0]+"px";
dragObj.o.style.top = e.clientY - dragObj.xx[1]+"px";
dragObj.o.style.width = data[2]+"px";
dragObj.o.style.height = data[3]+"px";
dragObj.o.style.position = "absolute";
var cloneDiv = document.createElement("li");
cloneDiv.style.width = data[2]+"px";
cloneDiv.style.height = data[3]+"px";
dragObj.otemp = cloneDiv;
dragObj.o.parentNode.insertBefore(cloneDiv,dragObj.o);
}
}
document.onmousemove = function(e){
var e = e || window.event;
if( dragObj.o != null){
dragObj.o.style.left = e.clientX - dragObj.xx[0]+"px";
dragObj.o.style.top = e.clientY - dragObj.xx[1]+"px";
createtmpl(e);
}
}
document.onmouseup = function(){
if(dragObj.o != null){
dragObj.o.style.width=oLi[0].offsetWidth+"px";
dragObj.o.style.height=oLi[0].offsetHeight+"px";
dragObj.otemp.parentNode.insertBefore(dragObj.o,dragObj.otemp)
dragObj.o.style.position=""
dragObj.otemp.parentNode.removeChild(dragObj.otemp);
dragObj={}
}
}
function createtmpl(e){
for(var i=0,len=oLi.length;i<len;i++){
if(oLi[i] == dragObj.o){
continue;
}
var b = inner(oLi[i],e);
if(b == 0){ continue; }
if(b == 1){
oLi[i].parentNode.insertBefore(dragObj.otemp,oLi[i]);
}else{
if(oLi[oLi[i].parentNode.children.length-1] == oLi[i]){
oLi[i].parentNode.appendChild(dragObj.otemp);
}else{
oLi[i].parentNode.insertBefore(dragObj.otemp,nextSibling(oLi[i]));
}
}
}
}
}
function nextSibling(obj){
var onext = obj.nextSibling;
while(onext.nodeType != 1){
onext = onext.nextSibling;
}
}
function inner(obj,e){
var a = getXY(obj);
if(e.clientX>a[0]&&e.clientX<(a[0]+a[2])&&e.clientY>a[1]&&e.clientY<(a[1]+a[3])){
if(e.clientY < (a[1] + a[3]/2)){
return 1;
}else{
return 2;
}
}else{
return 0;
}
}
function getXY(obj){
var l = obj.offsetLeft,
t = obj.offsetTop,
w = obj.offsetWidth,
h = obj.offsetHeight;
while(obj = obj.offsetParent){
l += obj.offsetLeft;
t += obj.offsetTop;
}
return [l,t,w,h];
}
</script>
</body>
</html>