js 拖动多div层，， IE，FF下多可行。

最新推荐文章于 2021-08-03 21:48:32 发布

转载最新推荐文章于 2021-08-03 21:48:32 发布 · 1.1k 阅读

文章标签：

#div #ie #function #button #null #border

本文介绍了一个使用JavaScript实现的多层DIV拖动效果的示例。通过该示例，用户可以了解如何创建可拖动的层，并掌握基本的鼠标事件监听及层位置更新的实现方式。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312">
<title>js 拖动多div层</title>
</head>
<body>
一共三个层,下面还有一个,把他拖上来
<div id="divDialog" style='cursor:move;border:6px solid #000000;left:1px;top:2px;width:100px;height:100px;background-color:#F9F7ED;position:absolute;text-align:center'><span>Magnolia Mag.nolia</span><input type="text" style="width:50px" maxlength="5"/></div>

<div id="test1" style='cursor:move;border:6px solid #000000;left:1px;top:200px;width:150px;height:150px;background-color:#FF1A00;position:absolute;text-align:center'><span>Mozilla Red</span>
<input type="text" style="width:80px" maxlength="9"/></div>

<div id="test3" style="border:3px solid #C3D9FF;text-align:center;left:700px;top:100px;width:150px;height:250px;background-color:#ffffff;position:absolute"><div id="test31" style="cursor:move;left:300px;top:200px;width:150px;height:30px;background-color:#C3D9FF;text-align:center;vertical-align:center;line-height:30px;font-weight:bold;color:#ffffff">小纸条</div>一共三个层,下面还有一个,把他拖上来
<textarea style="width:130px;height:150px;">有了拖动层,做局部拖动很简单</textarea>
<input type="button" value="submit it"/></div>

<div id="test4" style="border:3px solid #CDEB8B;text-align:center;left:480px;top:150px;width:150px;height:250px;background-color:#ffffff;position:absolute"><div id="test41" style="cursor:move;left:300px;top:200px;width:150px;height:30px;background-color:#CDEB8B;text-align:center;vertical-align:center;line-height:30px;font-weight:bold;color:#ffffff">小纸条</div>一共三个层,下面还有一个,把他拖上来
<textarea style="width:130px;height:150px;">顺便练习下颜色搭配</textarea>
<input type="button" value="submit it"/></div>

<div id="test2" style='cursor:move;border:6px solid #000000;left:200px;top:800px;width:100px;height:100px;background-color:#EEEEEE;position:absolute;text-align:center'><span>Shiny silver</span>
<input type="button" value="hit me"/></div>

<script type="text/javascript" charset="utf-8">
var $=function(id){return document.getElementById(id)};
Array.prototype.extend=function(C){for(var B=0,A=C.length;B<A;B++){this.push(C[B]);}return this;}
function divDrag(){
var A,B,$cn;
var zIndex=1;
this.dragStart=function(e){
e=e||window.event;
if((e.which && (e.which!=1))||(e.button && (e.button!=1)))return;
var pos=this.$pos;
$cn=this.parent||this;
if(document.defaultView){
_top=document.defaultView.getComputedStyle($cn,null).getPropertyValue("top");
_left=document.defaultView.getComputedStyle($cn,null).getPropertyValue("left");}
else{
if($cn.currentStyle){_top=$cn.currentStyle["top"];_left=$cn.currentStyle["left"];}}
pos.ox=(e.pageX||(e.clientX+document.documentElement.scrollLeft))-parseInt(_left);
pos.oy=(e.pageY||(e.clientY+document.documentElement.scrollTop))-parseInt(_top);
if(!!A){
if(document.removeEventListener){
document.removeEventListener("mousemove",A,false);
document.removeEventListener("mouseup",B,false);}
else{
document.detachEvent("onmousemove",A);
document.detachEvent("onmouseup",B);}}
A=this.dragMove.create(this);
B=this.dragEnd.create(this);
if(document.addEventListener){
document.addEventListener("mousemove",A,false);
document.addEventListener("mouseup",B,false);}
else{
document.attachEvent("onmousemove",A);
document.attachEvent("onmouseup",B);}
$cn.style.zIndex=(++zIndex);
this.stop(e);
}
this.dragMove=function(e){
e=e||window.event;
var pos=this.$pos;
$cn=this.parent||this;
$cn.style.top=(e.pageY||(e.clientY+document.documentElement.scrollTop))-parseInt(pos.oy)+'px';
$cn.style.left=(e.pageX||(e.clientX+document.documentElement.scrollLeft))-parseInt(pos.ox)+'px';
this.stop(e);}
this.dragEnd=function(e){
var pos=this.$pos;
e=e||window.event;
if((e.which && (e.which!=1))||(e.button && (e.button!=1)))return;
$cn=this.parent||this;
if(!!(this.parent)){this.style.backgroundColor=pos.color}
if(document.removeEventListener){
document.removeEventListener("mousemove",A,false);
document.removeEventListener("mouseup",B,false);}
else{
document.detachEvent("onmousemove",A);
document.detachEvent("onmouseup",B);}
A=null;
B=null;
$cn.style.zIndex=(++zIndex);
this.stop(e);
}
this.shiftColor=function(){
this.style.backgroundColor="#EEEEEE";
}
this.position=function (e){
var t=e.offsetTop;
var l=e.offsetLeft;
while(e=e.offsetParent){
t+=e.offsetTop;
l+=e.offsetLeft;}
return {x:l,y:t,ox:0,oy:0,color:null}
}
this.stop=function(e){
if(e.stopPropagation){e.stopPropagation();}else{e.cancelBubble=true;}
if(e.preventDefault){e.preventDefault();}else{e.returnValue=false;}
}
this.stop1=function(e){
e=e||window.event;
if(e.stopPropagation){e.stopPropagation();}else{e.cancelBubble=true;}
}
this.create=function(bind){
var B=this;
var A=bind;
return function(e){return B.apply(A,[e]);}
}
this.dragStart.create=this.create;
this.dragMove.create=this.create;
this.dragEnd.create=this.create;
this.shiftColor.create=this.create;
this.initialize=function(){
for(var A=0,B=arguments.length;A<B;A++){
C=arguments[A];
if(!(C.push)){C=[C];}
$C=(typeof(C[0])=='object')?C[0]:(typeof(C[0])=='string'?$(C[0]):null);
if(!$C)continue;
$C.$pos=this.position($C);
$C.dragMove=this.dragMove;
$C.dragEnd=this.dragEnd;
$C.stop=this.stop;
if(!!C[1]){$C.parent=C[1];$C.$pos.color=$C.style.backgroundColor;}
if($C.addEventListener){
$C.addEventListener("mousedown",this.dragStart.create($C),false);
if(!!C[1]){$C.addEventListener("mousedown",this.shiftColor.create($C),false);}}
else{$C.attachEvent("onmousedown",this.dragStart.create($C));
if(!!C[1]){$C.attachEvent("onmousedown",this.shiftColor.create($C));}}
}
}
this.initialize.apply(this,arguments);
}
//生成拖动层很简单,只需要(参数之一如果是数组表示局部拖动,arr[0]表示拖动层,arr[1]表示整体)
new divDrag(['divDialog']);
</script>
</body>
</html>