SoFunction
Updated on 2025-04-03

JavaScript to implement DIV layer dragging and dynamically add new layers

This article describes the method of JavaScript to implement DIV layer dragging and dynamically adding new layers. Share it for your reference. The specific analysis is as follows:

Add a new DIV layer without refresh, and can realize the drag of this layer. The mouse drag layer can move the position, save the JS part as a new file, and introduce it from the outside when used. This drag layer code is very popular, and large websites such as GG and YAHOO can often see this effect.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DIVLayer drag，Dynamically add new layersJavaScript</title>
<style>
body {margin:0px;padding:0px;font-size:12px;text-align:center;}
body > div {text-align:center; margin-right:auto; margin-left:auto;} 
.content{width:900px;}
.content .left{
  float:left;
  width:20%;
  border:1px solid #0066CC;
  margin:3px;
}
.content .center{
 float:left;
 border:1px solid #FF0000;
 margin:3px;
 width:57%
}
.content .right{
 float:right;
 width:20%;
 border:1px solid #FF0000;
 margin:3px
}
.mo{
 height:auto;
 border:1px solid #CCC;
 margin:3px;
 background:#FFF
}
.mo h1{
 background:#ECF9FF;
 height:18px;
 padding:3px;
 cursor:move
}
.closediv{
 cursor:default;
}
.minusspan{
 cursor:default;
}
.mo .nr{
 height:80px;
 border:1px solid #F3F3F3;
 margin:2px
}
h1{
 margin:0px;
 padding:0px;
 text-align:left;
 font-size:12px
}
.dragging {
  FILTER: progid:(opacity=60);
 opacity: 0.6;
 moz-opacity: 0.6
}
</style>
<script language="javascript">
var dragobj={}
=function(){return false}
var domid=12
function on_ini(){
  =function(s){return (s)>-1?true:false}
  var agent=
  =("Opera")
  =("IE") && !isOpr
  =("Mozilla") && !isOpr && !isIE
  if(isMoz){
    .__defineGetter__("x",function(){return +2})
    .__defineGetter__("y",function(){return +2})
  }
  basic_ini()
}
function basic_ini(){
  window.$=function(obj){return typeof(obj)=="string"?(obj):obj}
  =function(obj){if($(obj)!=null){$(obj).($(obj))}}
}
=function(obj){if($(obj)!=null){$(obj).($(obj))}}
=function(){
  on_ini()
  var o=("h1")
  for(var i=0;i<;i++){
    o[i].onmousedown=addevent;
    //Add fold and close buttons    var tt = ("div");
     = "float:left";
    
    var span = ("span");
     = "--"+o[i].innerHTML;
     = "cursor:default;";
     = minusDiv;
    (span);
    
    var close = ("div");
     = "X";
     = "cursor:default;float:right";
     = closeDiv;
    o[i].innerHTML = "";
    o[i].appendChild(tt);
    o[i].appendChild(close);
  }
}
//Fold or display layerfunction minusDiv(e)
{
  e=e||event
  var nr = ; //Get content layer   = ==""?"none":"";
}
//Move out the layerfunction closeDiv(e)
{
  e=e||event
  var mdiv = ; //Get the target layer  oDel(mdiv);
}
function addevent(e){
  if(!=null)
    return false
  e=e||event
  =
  =getxy()
  =new Array(([1]),([0]))
  // = 'dragging';
  =[2]+"px"
  =[3]+"px"
  =([0])+"px"
  =([1])+"px"
  ="absolute"
  ='alpha(opacity=60)'; //Add a drag transparent effect  var om=("div")
  =om
  =[2]+"px"
  =[3]+"px"
   = "1px dashed red"; //Ikaiser added to implement dotted frame  (om,)
  return false
}
=function(){return false}
=function(){()}
=function(){()}
=function(){
  if(!=null){
    ="auto"
    ="auto"
    (,)
    =""
    oDel()
    dragobj={}
  }
}
=function(e){
  e=e||event
  if(!=null){
    =([0])+"px"
    =([1])+"px"
    createtmpl(e, ) //Pass the current drag object  }
}
function getxy(e){
  var a=new Array()
  var t=;
  var l=;
  var w=;
  var h=;
  while(e=){
    t+=;
    l+=;
  }
  a[0]=t;a[1]=l;a[2]=w;a[3]=h
 return a;
}
function inner(o,e){
  var a=getxy(o)
  if(>a[1] && <(a[1]+a[2]) && >a[0] && <(a[0]+a[3])){
    if(<(a[0]+a[3]/2))
      return 1;
    else
      return 2;
  }else
    return 0;
}
//Change the current drag layer to change the size when dragging, preview the effectfunction createtmpl(e, elm){
  for(var i=0;i<domid;i++){
    if(("m"+i) == null) //The layers that have been moved will no longer be traversed      continue;
    if($("m"+i)==)
      continue
    var b=inner($("m"+i),e)
    if(b==0)
      continue
    =$("m"+i).offsetWidth
     = $("m"+i).offsetWidth;
    //1 is moving down, 2 is moving up    if(b==1){
      $("m"+i).(,$("m"+i))
    }else{
      if($("m"+i).nextSibling==null){
        $("m"+i).()
      }else{
        $("m"+i).(,$("m"+i).nextSibling)
      }
    }
    return
  }
  for(var j=0;j<3;j++){
    if($("dom"+j).("div")||$("dom"+j).("DIV"))
      continue
    var op=getxy($("dom"+j))
    if(>(op[1]+10) && <(op[1]+op[2]-10)){
      $("dom"+j).appendChild()
      =(op[2]-10)+"px"
    }
  }
}
function add_div()
{
  var o=("div")
  ="mo"
  ="m"+domid
  $('dom0').appendChild(o)
  ="<h1>dom"+domid+"</h1><div class=nr></div>"
  ("h1")[0].onmousedown=addevent
  domid++
}
</script>
</head>
<body>
<INPUT TYPE="button" value="Add a new DIV layer" onclick="add_div();">
<div class=content>
  <div class=left id=dom0>
    <div class=mo id=m0>
      <h1>dom0</h1>
      <div class="nr"></div>
    </div>
    <div class=mo id=m1>
      <h1>dom1</h1><div class="nr"></div>
    </div>
    <div class=mo id=m2><h1>dom2</h1><div class="nr"></div></div>
    <div class=mo id=m3><h1>dom3</h1><div class="nr"></div></div>
  </div>
  <div class=center id=dom1>
    <div class=mo id=m4><h1>dom4</h1><div class="nr"></div></div>
    <div class=mo id=m5><h1>dom5</h1><div class="nr"></div></div>
  </div>
  <div class=right id=dom2>
    <div class=mo id=m8><h1>dom8</h1><div class="nr"></div></div>
    <div class=mo id=m9><h1>dom9</h1><div class="nr"></div></div>
  </div>
</div>
</body>
</html>

I hope this article will be helpful to everyone's JavaScript programming.