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


Posted in Javascript onMay 12, 2015

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
js兼容的placeholder属性详解
Aug 18 Javascript
javascript实现在线客服效果
Jul 15 Javascript
js css实现垂直方向自适应的三角提示菜单
Jun 26 Javascript
gulp-uglify 与gulp.watch()配合使用时报错(重复压缩问题)
Aug 24 Javascript
JS实现选定指定HTML元素对象中指定文本内容功能示例
Feb 13 Javascript
jQuery使用unlock.js插件实现滑动解锁
Apr 04 jQuery
详解Angular 自定义结构指令
Jun 21 Javascript
使用3D引擎threeJS实现星空粒子移动效果
Sep 13 Javascript
浅析从vue源码看观察者模式
Jan 29 Javascript
详解angular部署到iis出现404解决方案
Aug 14 Javascript
VueJS 组件参数名命名与组件属性转化问题
Dec 03 Javascript
微信小程序自定义toast组件的方法详解【含动画】
May 11 Javascript
js实现带按钮的上下滚动效果
May 12 #Javascript
js验证上传图片的方法
May 12 #Javascript
js中setTimeout()与clearTimeout()用法实例浅析
May 12 #Javascript
js实现一个链接打开两个链接地址的方法
May 12 #Javascript
js实现鼠标经过表格行变色的方法
May 12 #Javascript
js比较日期大小的方法
May 12 #Javascript
js实现简单div拖拽功能实例
May 12 #Javascript
You might like
十大“创意”战术!
2020/03/04 星际争霸
PHP 基于Yii框架中使用smarty模板的方法详解
2013/06/13 PHP
动态载入/删除/更新外部 JavaScript/Css 文件的代码
2010/07/03 Javascript
Javascript中 关于prototype属性实现继承的原理图
2013/04/16 Javascript
JavaScript中的console.time()函数详细介绍
2014/12/29 Javascript
详解AngularJS中的filter过滤器用法
2016/01/04 Javascript
BootStrap轻松实现微信页面开发代码分享
2016/10/21 Javascript
微信小程序 wx.request(接口调用方式)详解及实例
2016/11/23 Javascript
Angular JS数据的双向绑定详解及实例
2016/12/31 Javascript
vue2.0父子组件及非父子组件之间的通信方法
2017/01/21 Javascript
vue自定义filters过滤器
2018/04/26 Javascript
JavaScript深拷贝和浅拷贝概念与用法实例分析
2018/06/07 Javascript
生成无限制的微信小程序码的示例代码
2019/09/20 Javascript
python操作mysql中文显示乱码的解决方法
2014/10/11 Python
Python 多线程抓取图片效率对比
2016/02/27 Python
python基础之入门必看操作
2017/07/26 Python
Django 后台获取文件列表 InMemoryUploadedFile的例子
2019/08/07 Python
Python将视频或者动态图gif逐帧保存为图片的方法
2019/09/10 Python
python如何判断IP地址合法性
2020/04/05 Python
keras的load_model实现加载含有参数的自定义模型
2020/06/22 Python
python抢购软件/插件/脚本附完整源码
2021/03/04 Python
意大利奢侈品网站:Italist
2016/08/23 全球购物
工商管理专业应届生求职信
2013/11/04 职场文书
优秀的计算机专业求职信范文
2013/12/27 职场文书
个性与发展自我评价
2014/02/11 职场文书
司机职责范本
2014/03/08 职场文书
西式婚礼主持词
2014/03/13 职场文书
优秀的导游求职信范文
2014/04/06 职场文书
研究生简历自我评价范文
2014/09/13 职场文书
汽车质检员岗位职责
2015/04/08 职场文书
军事博物馆观后感
2015/06/05 职场文书
学校财务管理制度
2015/08/04 职场文书
2016年大学生寒假社会实践心得体会
2015/10/09 职场文书
小学教师师德培训心得体会
2016/01/09 职场文书
2016年先进班集体事迹材料
2016/02/26 职场文书
六种css3实现的边框过渡效果
2021/04/22 HTML / CSS