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 相关文章推荐
Javascript SHA-1:Secure Hash Algorithm
Dec 20 Javascript
利用JQuery为搜索栏增加tag提示
Jun 22 Javascript
filters.revealTrans.Transition使用方法小结
Aug 19 Javascript
工作中常用到的JS表单验证代码(包括例子)
Nov 11 Javascript
Javascript动态引用CSS文件的2种方法介绍
Jun 06 Javascript
Javascript中Date类型和Math类型详解
Feb 27 Javascript
jQuery UI Bootstrap是什么?
Jun 17 Javascript
JS实现pasteHTML兼容ie,firefox,chrome的方法
Jun 22 Javascript
React中jquery引用的实现方法
Sep 12 jQuery
使用vue点击li,获取当前点击li父辈元素的属性值方法
Sep 12 Javascript
详解如何在微信小程序开发中正确的使用vant ui组件
Sep 13 Javascript
Element实现动态表格的示例代码
Aug 02 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
解析crontab php自动运行的方法
2013/06/24 PHP
Laravel模板引擎Blade中section的一些标签的区别介绍
2015/02/10 PHP
jQuery 回调函数(callback)的使用和基础
2015/02/26 Javascript
jQuery实现tab标签自动切换的方法
2015/02/28 Javascript
jQuery 遍历函数详解
2015/07/05 Javascript
JQuery组件基于Bootstrap的DropDownList(完整版)
2016/07/05 Javascript
AngularJS基础 ng-cloak 指令简单示例
2016/08/01 Javascript
JS实现可编辑的后台管理菜单功能【附demo源码下载】
2016/09/13 Javascript
nodejs 图片预览和上传的示例代码
2017/09/30 NodeJs
vue中添加mp3音频文件的方法
2018/03/02 Javascript
babel7.x和webpack4.x配置vue项目的方法步骤
2019/05/12 Javascript
MockJs结合json-server模拟后台数据
2020/08/26 Javascript
JavaScript如何判断对象有某属性
2020/07/03 Javascript
vue-video-player实现实时视频播放方式(监控设备-rtmp流)
2020/08/10 Javascript
Python使用htpasswd实现基本认证授权的例子
2014/06/10 Python
Python中http请求方法库汇总
2016/01/06 Python
Python中实现变量赋值传递时的引用和拷贝方法
2018/04/29 Python
python 获取页面表格数据存放到csv中的方法
2018/12/26 Python
Python+OpenCV感兴趣区域ROI提取方法
2019/01/10 Python
Django admin禁用编辑链接和添加删除操作详解
2019/11/15 Python
python实例化对象的具体方法
2020/06/17 Python
CSS3 实现时间轴动画
2020/11/25 HTML / CSS
canvas之自定义头像功能实现代码示例
2017/09/29 HTML / CSS
亚洲最大旅游体验平台:KKday
2017/10/21 全球购物
世界上最大的曲棍球商店:Pro Hockey Life
2017/10/30 全球购物
迪斯尼假期(欧洲、中东及非洲):Disney Holidays EMEA
2021/02/15 全球购物
Ibatis的核心配置文件都有什么
2014/09/08 面试题
Java中采用什么结构来捕获、处理异常?各子句的顺序、功能如何
2013/10/07 面试题
小学校长先进事迹材料
2014/05/13 职场文书
债务追讨授权委托书范本
2014/10/16 职场文书
前台接待岗位职责
2015/02/03 职场文书
自荐信怎么写
2015/03/04 职场文书
2015年度招聘工作总结
2015/05/28 职场文书
导游词之铁岭象牙山
2019/12/06 职场文书
关于pytest结合csv模块实现csv格式的数据驱动问题
2022/05/30 Python
JavaScript前端面试组合函数
2022/06/21 Javascript