首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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实现DIV层拖动及动态增加新层的方法

- Author -

shichen2014

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
js中confirm实现执行操作前弹出确认框的方法
Nov 01 Javascript
JavaScript里四舍五入函数round用法实例
Apr 06 Javascript
JavaScript使用cookie实现记住账号密码功能
Apr 27 Javascript
JavaScript实现简单的数字倒计时
May 15 Javascript
jquery+php实现滚动的数字特效
Nov 29 Javascript
利用jQuery实现WordPress中@的ID悬浮显示评论内容
Dec 11 Javascript
jQuery动画效果图片轮播特效
Jan 12 Javascript
JS实现页面数据无限加载
Sep 13 Javascript
javascript事件捕获机制【深入分析IE和DOM中的事件模型】
Dec 15 Javascript
js中字符型和数值型数字的互相转化方法(必看)
Apr 25 Javascript
js+canvas实现滑动拼图验证码功能
Mar 26 Javascript
微信小程序实现日历功能
Nov 27 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
匹配文本(1) 追加文本(1) 图片模糊(1) GNN(1) flex(1) flex-shrink(1) canvas(2) SFTP(3) 文字识别(1) 选择器(1)
You might like
特详细的PHPMYADMIN简明安装教程
2008/08/01 PHP
php面向对象 字段的声明与使用
2012/06/14 PHP
自定义php类(查找/修改)xml文档
2013/03/26 PHP
php清除和销毁session的方法分析
2015/03/19 PHP
PHP.vs.JAVA
2016/04/29 PHP
PHP编译configure时常见错误的总结
2017/08/17 PHP
PHP中通过getopt解析GNU C风格命令行选项
2019/11/18 PHP
JS 建立对象的方法
2007/04/21 Javascript
jQuery温习篇 强大的JQuery选择器
2010/04/24 Javascript
Jquery实现纵向横向菜单
2016/01/24 Javascript
三种带箭头提示框总结实例
2016/06/14 Javascript
js 基础篇必看(点击事件轮播图的简单实现)
2016/08/20 Javascript
浅谈javascript中的三种弹窗
2016/10/21 Javascript
jQuery图片拖动组件Dropzone用法示例
2017/01/17 Javascript
JS简单实现点击按钮或文字显示遮罩层的方法
2017/04/27 Javascript
vue 实现锚点功能操作
2020/08/10 Javascript
python登录豆瓣并发帖的方法
2015/07/08 Python
用Python实现斐波那契（Fibonacci）函数
2016/03/25 Python
Python分支结构（switch）操作简介
2018/01/17 Python
python得到单词模式的示例
2018/10/15 Python
python使用for循环计算0-100的整数的和方法
2019/02/01 Python
python实现视频读取和转化图片
2019/12/10 Python
pytorch的梯度计算以及backward方法详解
2020/01/10 Python
浅谈pytorch池化maxpool2D注意事项
2020/02/18 Python
scrapy结合selenium解析动态页面的实现
2020/09/28 Python
在vscode中启动conda虚拟环境的思路详解
2020/12/25 Python
CSS3 优势以及网页设计师如何使用CSS3技术
2009/07/29 HTML / CSS
泰国办公用品购物网站：OfficeMate
2018/02/04 全球购物
网络工程与软件技术毕业生自荐信
2013/09/24 职场文书
总监职责范文
2013/11/09 职场文书
新郎新娘婚礼答谢词
2014/01/11 职场文书
2014院党委领导班子及其成员群众路线对照检查材料思想汇报
2014/10/04 职场文书
晚会闭幕词
2015/01/28 职场文书
2016年圣诞节寄语（一句话）
2015/12/07 职场文书
Django展示可视化图表的多种方式
2021/04/08 Python
解析MySQL索引的作用
2022/03/03 MySQL