<html>
<head>
<title>DRAG the DIV</title>
<style>
*{font-size:12px}
body{
text-align:center;
}
.div{
color:#7787cc;
background-color:#e5eef9;
width:200px;
height:150px;
border:1px solid gray;
}
.out{
float:left;
margin:2px;
height:100%;
border:1px solid blue;
width:200px;
}
#layout{
text-align:center;
width:840px;
border:1px solid gray;
margin:auto;
height:100%;
}
</style>
<script type="text/javascript">
var isIE = (document.all) ? true : false;
//自定义
var $ = function (id){
return document.getElementById(new String(id));
};
var $N = function (name){
return document.getElementsByTagName(new String(name));
};
//拓展FF下outerHTML
if(typeof(HTMLElement)!="undefined" && !window.opera)
{
HTMLElement.prototype.__defineGetter__("outerHTML",function()
{
var a=this.attributes, str="<"+this.tagName, i=0;for(;i<a.length;i++)
if(a[i].specified)
str+=" "+a[i].name+'="'+a[i].value+'"';
if(!this.canHaveChildren)
return str+" />";
return str+">"+this.innerHTML+"</"+this.tagName+">";
});
HTMLElement.prototype.__defineSetter__("outerHTML",function(s)
{
var r = this.ownerDocument.createRange();
r.setStartBefore(this);
var df = r.createContextualFragment(s);
this.parentNode.replaceChild(df, this);
return s;
});
HTMLElement.prototype.__defineGetter__("canHaveChildren",function()
{
return !/^(area|base|basefont|col|frame|hr|img|br|input|isindex|link|meta|param)$/.test(this.tagName.toLowerCase());
});
}
//
var draged=false;
var lastX,lastY,lastLeft,lastTop;
var ao;
function dragStart(event){
//alert("asd");
ao=event.srcElement||event.target;
draged=true;
tdiv=document.createElement("div");
tdiv.innerHTML=ao.outerHTML;//FF下用什么代替outerHTML
tdiv.style.display="block";
tdiv.style.position="absolute";
tdiv.style.filter="alpha(opacity=70)";
tdiv.style.cursor="move";
tdiv.style.width=ao.offsetWidth;
tdiv.style.height=ao.offsetHeight;
tdiv.style.top=getInfo(ao).top;
tdiv.style.left=getInfo(ao).left;
document.body.appendChild(tdiv);
lastX=event.clientX;
lastY=event.clientY;
lastLeft=tdiv.style.left;
lastTop=tdiv.style.top;
if(isIE){
document.attachEvent("onmousemove",draging);
document.attachEvent("onmouseup",dragEnd);
}
else{
document.addEventListener("mousemove",draging,false);
document.addEventListener("mouseup",dragEnd,false);
}
}
function draging(event){//重要:判断MOUSE的位置
if(!draged)return;
var tX=event.clientX;
var tY=event.clientY;
tdiv.style.left=parseInt(lastLeft)+tX-lastX;
tdiv.style.top=parseInt(lastTop)+tY-lastY;
var outers = document.getElementsByTagName("div");
for(var i=0;i<outers.length;i++){
if(outers[i].className=='out'){
var outer=getInfo(outers[i]);
if(tX>=outer.left&&tX<=outer.right&&tY>=outer.top&&tY<=outer.bottom){
var subLans=outers[i].getElementsByTagName("div");//获取单元格下 所有的表格
if(subLans.length==0){//如果没有表格 就放进去
if(tX>=outer.left&&tX<=outer.right&&tY>=outer.top&&tY<=outer.bottom){
outers[i].appendChild(ao);
}
break;//直接退出
}
for(var j=0;j<subLans.length;j++){
var subLan=getInfo(subLans[j]);
if(tX>=subLan.left&&tX<=subLan.right&&tY>=subLan.top&&tY<=subLan.bottom){
// outers[i].insertBefore(ao,subLans[j]);//在它之前放入这个表格
//alert(subLans[j].parentNode==outers[i])
subLans[j].parentNode.insertBefore( ao , subLans[j]);
break;
}else{
outers[i].appendChild(ao);//否则放在最后
}
}
}
}
}
//清除选中
window.getSelection && window.getSelection().removeAllRanges();//FF
document.onselectstart = function () { event.returnValue = false; }//IE
}
var i=0;
function dragEnd(){
if(!draged)return;
draged=false;
mm=ff(150,30);
}
function ff(aa,ab){//用于恢复位置.
//var tdiv_ = tdiv.cloneNode(true);//动态创建不同的div。避免拖动太快 造成的闭包变量重复操作引起的错误。
//怎样动态创建名字啊啊 我汗
// document.body.appendChild(tdiv);
var ac=parseInt(getInfo(tdiv).left);
var ad=parseInt(getInfo(tdiv).top);
var ae=(ac-getInfo(ao).left)/ab;
var af=(ad-getInfo(ao).top)/ab;
return setInterval(function(){if(ab<1){
clearInterval(mm);
//tdiv.removeNode(true);//在IE下删除节点
document.body.removeChild(tdiv);
ao=null;;
}
ab--;
ac-=ae;
ad-=af;
tdiv.style.left=parseInt(ac)+"px";
tdiv.style.top=parseInt(ad)+"px"
}
,aa/ab)
}
function inint(){//初始化
var subDivs = $N("div");
for(var j=0;j<subDivs.length;j++){
if(subDivs[j].className=='div'){
if (isIE) {
subDivs[j].attachEvent("onmousedown",dragStart);
} else {
subDivs[j].addEventListener("mousedown",dragStart,false);
}
}
}
}
var lb = function(){
alert(321);
}
var getInfo = function (o){//取得坐标
var to=new Object();
to.left=to.right=to.top=to.bottom=0;
var twidth=o.offsetWidth;
var theight=o.offsetHeight;
while(o!=document.body){
to.left+=o.offsetLeft;
to.top+=o.offsetTop;
o=o.offsetParent;
}
to.right=to.left+twidth;
to.bottom=to.top+theight;
return to;
}
</script>
</head>
<body οnlοad="inint();">
<div id="layout">
<div id="left" name="outer" class="out">
<div class="div" name="lan">number1</div>
<div class="div" name="lan">number1.1</div>
</div>
<div id="center" name="outer" class="out">
<div class="div" name="lan">number2</div>
<div class="div" name="lan">number2.1</div>
</div>
<div id="right" name="outer" class="out">
<div class="div" name="lan">number3</div>
<div class="div" name="lan">number3.1</div>
<div class="div" name="lan">number3.2</div>
</div>
<div id="rightr" name="outer" class="out">
<div class="div" name="lan">number4</div>
<div class="div" name="lan">number4.1</div>
<div class="div" name="lan">number4.2</div>
</div>
</div>
</body>
</html>