JS实现网页Div层Clone拖拽效果


Posted in Javascript onSeptember 26, 2015

本文实例讲述了JS实现网页Div层Clone拖拽效果。分享给大家供大家参考。具体如下:

这是一个层拖动,网页上的拖拽Clone效果实例,两个层可在鼠标的拖动下,任意改变位置,智能判断层级,也就是智能判断自身是否处于最高层,最高处的层是不会被其它层遮挡的。

运行效果截图如下:

JS实现网页Div层Clone拖拽效果

在线演示地址如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>拖拽--Clone</title>
<style type="text/css"> 
body,div{margin:0;padding:0;}
body{background:#3e3e3e;}
div{position:absolute;width:100px;height:100px;cursor:move;border:1px solid #888;background:#000;}
#drag1{top:100px;left:100px;}
#drag2{top:100px;left:300px;}
#temp{opacity:0.3;filter:alpha(opacity=30);}
</style>
<script type="text/javascript"> 
var zIndex = 1;
window.onload = function ()
{
 var oDrag1 = document.getElementById("drag1");
 var oDrag2 = document.getElementById("drag2");
 drag(oDrag1);
 drag(oDrag2);
};
function drag(oDrag)
{
 var disX = dixY = 0;
 oDrag.onmousedown = function (event)
 {
  var event = event || window.event;
  disX = event.clientX - this.offsetLeft;
  disY = event.clientY - this.offsetTop;  
  var oTemp = document.createElement("div");
  oTemp["id"] = "temp";
  oTemp.style.left = this.currentStyle ? this.currentStyle["left"] : getComputedStyle(this, null)["left"];
  oTemp.style.top = this.currentStyle ? this.currentStyle["top"] : getComputedStyle(this, null)["top"];
  oTemp.style.zIndex = zIndex++;
  document.body.appendChild(oTemp);
  document.onmousemove = function (event)
  {
   var event = event || window.event;
   var iL = event.clientX - disX;
   var iT = event.clientY - disY;
   var maxL = document.documentElement.clientWidth - oDrag.offsetWidth;
   var maxT = document.documentElement.clientHeight - oDrag.offsetHeight
   iL <= 0 && (iL = 0);
   iT <= 0 && (iT = 0);
   iL >= maxL && (iL = maxL);
   iT >= maxT && (iT = maxT);
   oTemp.style.left = iL + "px";
   oTemp.style.top = iT + "px";
   return false;
  };
  document.onmouseup = function ()
  {
   document.onmousemove = null;
   document.onmouseup = null;
   oDrag.style.left = oTemp.style.left;
   oDrag.style.top = oTemp.style.top;
   oDrag.style.zIndex = oTemp.style.zIndex;
   document.body.removeChild(oTemp);
   oDrag.releaseCapture && oDrag.releaseCapture()
  };
  this.setCapture && this.setCapture();  
  return false
 } 
}
</script>
</head>
<body>
<div id="drag1"></div>
<div id="drag2"></div>
</body>
</html>

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

Javascript 相关文章推荐
ExtJs 表单提交登陆实现代码
Aug 19 Javascript
jquery新的绑定事件机制on方法的使用方法
Apr 15 Javascript
js限制文本框只能输入中文的方法
Aug 11 Javascript
讲解JavaScript的Backbone.js框架的MVC结构设计理念
Feb 14 Javascript
基于javascript html5实现3D翻书特效
Mar 14 Javascript
jQuery简单验证上传文件大小及类型的方法
Jun 02 Javascript
【经典源码收藏】基于jQuery的项目常见函数封装集合
Jun 07 Javascript
使用AngularJS 跨站请求如何解决jsonp请求问题
Jan 16 Javascript
基于代数方程库Algebra.js解二元一次方程功能示例
Jun 09 Javascript
解决Mac下安装nmp的淘宝镜像失败问题
May 16 Javascript
微信小程序实现简单表格
Feb 14 Javascript
如何正确理解vue中的key详解
Nov 02 Javascript
jQuery超简单选项卡完整实例
Sep 26 #Javascript
angularjs学习笔记之简单介绍
Sep 26 #Javascript
JavaScript判断手机号运营商是移动、联通、电信还是其他(代码简单)
Sep 25 #Javascript
JS实现仿QQ效果的三级竖向菜单
Sep 25 #Javascript
微信支付如何实现内置浏览器的H5页面支付
Sep 25 #Javascript
JS+CSS实现仿支付宝菜单选中效果代码
Sep 25 #Javascript
jQuery EasyUI实现右键菜单变灰不可用效果
Sep 24 #Javascript
You might like
PHP读取目录下所有文件的代码
2008/01/07 PHP
php中通过虚代理实现延迟加载的实现代码
2011/06/10 PHP
PHP扩展模块Pecl、Pear以及Perl的区别
2014/04/09 PHP
Prototype RegExp对象 学习
2009/07/19 Javascript
用jquery模仿的a的title属性(兼容ie6/7)
2013/01/21 Javascript
jQuery:节点(插入,复制,替换,删除)操作
2013/03/04 Javascript
js 固定悬浮效果实现思路代码
2013/08/02 Javascript
登陆成功后自动计算秒数执行跳转
2014/01/23 Javascript
JS实现文件动态顺序载入的方法
2015/03/07 Javascript
javascript实现检验的各种规则
2015/07/31 Javascript
javascript中判断json的方法总结
2015/08/27 Javascript
jQuery简单实现仿京东商城的左侧菜单效果代码
2015/09/09 Javascript
Fullpage.js固定导航栏-实现定位导航栏
2016/03/17 Javascript
Markdown+Bootstrap图片自适应属性详解
2016/05/21 Javascript
Nodejs中 npm常用命令详解
2016/07/04 NodeJs
NodeJS配置HTTPS服务实例分享
2017/02/19 NodeJs
bootstrap模态框示例代码分享
2017/05/17 Javascript
Vue单文件组件基础模板小结
2017/08/10 Javascript
Vue+mui实现图片的本地缓存示例代码
2018/05/24 Javascript
Vue路由history模式解决404问题的几种方法
2018/09/29 Javascript
angular4强制刷新视图的方法
2018/10/09 Javascript
python简单实现基于SSL的IRC bot实例
2015/06/15 Python
解决Python 遍历字典时删除元素报异常的问题
2016/09/11 Python
Python实现某论坛自动签到功能
2019/08/20 Python
给我一面国旗 python帮你实现
2019/09/30 Python
18个Python脚本可加速你的编码速度(提示和技巧)
2019/10/17 Python
OpenCV模板匹配matchTemplate的实现
2019/10/18 Python
Django 自定义分页器的实现代码
2019/11/24 Python
Python中zip()函数的解释和可视化(实例详解)
2020/02/16 Python
2020年10款优秀的Python第三方库,看看有你中意的吗?
2021/01/12 Python
马来西亚最大的电器网站:Senheng
2017/10/13 全球购物
中专毕业生自我鉴定
2013/11/21 职场文书
书香校园活动方案
2014/02/28 职场文书
职务聘任书范文
2014/03/29 职场文书
用python基于appium模块开发一个自动收取能量的小助手
2021/09/25 Python
SQL中去除重复数据的几种方法汇总(窗口函数对数据去重)
2023/05/08 MySQL