JavaScript实现DIV层拖动及动态增加新层的方法

前端技术 2023/09/02 JavaScript

本文实例讲述了JavaScript实现DIV层拖动及动态增加新层的方法。分享给大家供大家参考。具体分析如下：

无刷新添加一个新的DIV层，并可实现的该层的拖动，鼠标拖动层可移动位置，将JS部分另存为一个新文件，用到的时候从外部引入，这个拖动层代码很流行，GG和YAHOO等大网站经常可以看到这种效果。

<html>
<head>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />
<title>DIV层拖动，动态增加新层的JavaScript</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:DXImageTransform.Microsoft.Alpha(opacity=60);
 opacity: 0.6;
 moz-opacity: 0.6
}
</style>
<script language=\"javascript\">
var dragobj={}
window.onerror=function(){return false}
var domid=12
function on_ini(){
  String.prototype.inc=function(s){return this.indexOf(s)>-1?true:false}
  var agent=navigator.userAgent
  window.isOpr=agent.inc(\"Opera\")
  window.isIE=agent.inc(\"IE\") && !isOpr
  window.isMoz=agent.inc(\"Mozilla\") && !isOpr && !isIE
  if(isMoz){
    Event.prototype.__defineGetter__(\"x\",function(){return this.clientX+2})
    Event.prototype.__defineGetter__(\"y\",function(){return this.clientY+2})
  }
  basic_ini()
}
function basic_ini(){
  window.$=function(obj){return typeof(obj)==\"string\"?document.getElementById(obj):obj}
  window.oDel=function(obj){if($(obj)!=null){$(obj).parentNode.removeChild($(obj))}}
}
window.oDel=function(obj){if($(obj)!=null){$(obj).parentNode.removeChild($(obj))}}
window.onload=function(){
  on_ini()
  var o=document.getElementsByTagName(\"h1\")
  for(var i=0;i<o.length;i++){
    o[i].onmousedown=addevent;
    //添加折叠和关闭按钮
    var tt = document.createElement(\"div\");
    tt.style.cssText = \"float:left\";
    
    var span = document.createElement(\"span\");
    span.innerHTML = \"--\"+o[i].innerHTML;
    span.style.cssText = \"cursor:default;\";
    span.onmousedown = minusDiv;
    tt.appendChild(span);
    
    var close = document.createElement(\"div\");
    close.innerHTML = \"X\";
    close.style.cssText = \"cursor:default;float:right\";
    close.onmousedown = closeDiv;
    o[i].innerHTML = \"\";
    o[i].appendChild(tt);
    o[i].appendChild(close);
  }
}
//折叠或者显示层
function minusDiv(e)
{
  e=e||event
  var nr = this.parentNode.parentNode.nextSibling; //取得内容层
  nr.style.display = nr.style.display==\"\"?\"none\":\"\";
}
//移出层
function closeDiv(e)
{
  e=e||event
  var mdiv = this.parentNode.parentNode; //取得目标层
  oDel(mdiv);
}
function addevent(e){
  if(dragobj.o!=null)
    return false
  e=e||event
  dragobj.o=this.parentNode
  dragobj.xy=getxy(dragobj.o)
  dragobj.xx=new Array((e.x-dragobj.xy[1]),(e.y-dragobj.xy[0]))
  //dragobj.o.className = \'dragging\';
  dragobj.o.style.width=dragobj.xy[2]+\"px\"
  dragobj.o.style.height=dragobj.xy[3]+\"px\"
  dragobj.o.style.left=(e.x-dragobj.xx[0])+\"px\"
  dragobj.o.style.top=(e.y-dragobj.xx[1])+\"px\"
  dragobj.o.style.position=\"absolute\"
  dragobj.o.style.filter=\'alpha(opacity=60)\'; //添加拖动透明效果
  var om=document.createElement(\"div\")
  dragobj.otemp=om
  om.style.width=dragobj.xy[2]+\"px\"
  om.style.height=dragobj.xy[3]+\"px\"
  om.style.border = \"1px dashed red\"; //ikaiser添加，实现虚线框
  dragobj.o.parentNode.insertBefore(om,dragobj.o)
  return false
}
document.onselectstart=function(){return false}
window.onfocus=function(){document.onmouseup()}
window.onblur=function(){document.onmouseup()}
document.onmouseup=function(){
  if(dragobj.o!=null){
    dragobj.o.style.width=\"auto\"
    dragobj.o.style.height=\"auto\"
    dragobj.otemp.parentNode.insertBefore(dragobj.o,dragobj.otemp)
    dragobj.o.style.position=\"\"
    oDel(dragobj.otemp)
    dragobj={}
  }
}
document.onmousemove=function(e){
  e=e||event
  if(dragobj.o!=null){
    dragobj.o.style.left=(e.x-dragobj.xx[0])+\"px\"
    dragobj.o.style.top=(e.y-dragobj.xx[1])+\"px\"
    createtmpl(e, dragobj.o) //传递当前拖动对象
  }
}
function getxy(e){
  var a=new Array()
  var t=e.offsetTop;
  var l=e.offsetLeft;
  var w=e.offsetWidth;
  var h=e.offsetHeight;
  while(e=e.offsetParent){
    t+=e.offsetTop;
    l+=e.offsetLeft;
  }
  a[0]=t;a[1]=l;a[2]=w;a[3]=h
 return a;
}
function inner(o,e){
  var a=getxy(o)
  if(e.x>a[1] && e.x<(a[1]+a[2]) && e.y>a[0] && e.y<(a[0]+a[3])){
    if(e.y<(a[0]+a[3]/2))
      return 1;
    else
      return 2;
  }else
    return 0;
}
//将当前拖动层在拖动时可变化大小，预览效果
function createtmpl(e, elm){
  for(var i=0;i<domid;i++){
    if(document.getElementById(\"m\"+i) == null) //已经移出的层不再遍历
      continue;
    if($(\"m\"+i)==dragobj.o)
      continue
    var b=inner($(\"m\"+i),e)
    if(b==0)
      continue
    dragobj.otemp.style.width=$(\"m\"+i).offsetWidth
    elm.style.width = $(\"m\"+i).offsetWidth;
    //1为下移，2为上移
    if(b==1){
      $(\"m\"+i).parentNode.insertBefore(dragobj.otemp,$(\"m\"+i))
    }else{
      if($(\"m\"+i).nextSibling==null){
        $(\"m\"+i).parentNode.appendChild(dragobj.otemp)
      }else{
        $(\"m\"+i).parentNode.insertBefore(dragobj.otemp,$(\"m\"+i).nextSibling)
      }
    }
    return
  }
  for(var j=0;j<3;j++){
    if($(\"dom\"+j).innerHTML.inc(\"div\")||$(\"dom\"+j).innerHTML.inc(\"DIV\"))
      continue
    var op=getxy($(\"dom\"+j))
    if(e.x>(op[1]+10) && e.x<(op[1]+op[2]-10)){
      $(\"dom\"+j).appendChild(dragobj.otemp)
      dragobj.otemp.style.width=(op[2]-10)+\"px\"
    }
  }
}
function add_div()
{
  var o=document.createElement(\"div\")
  o.className=\"mo\"
  o.id=\"m\"+domid
  $(\'dom0\').appendChild(o)
  o.innerHTML=\"<h1>dom\"+domid+\"</h1><div class=nr></div>\"
  o.getElementsByTagName(\"h1\")[0].onmousedown=addevent
  domid++
}
</script>
</head>
<body>
<INPUT TYPE=\"button\" value=\"添加一个新的DIV层\" 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>

希望本文所述对大家的javascript程序设计有所帮助。

本文地址：https://www.stayed.cn/item/3365

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案