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 相关文章推荐
[原创]静态页面也可以实现预览 列表不同的显示方式
Oct 14 Javascript
window.addEventListener来解决让一个js事件执行多个函数
Dec 26 Javascript
Bootstrap布局组件教程之Bootstrap下拉菜单
Jun 12 Javascript
jQuery简单实现页面元素置顶时悬浮效果示例
Aug 01 Javascript
EditPlus中的正则表达式 实战(4)
Dec 15 Javascript
详解如何构建Angular项目目录结构
Jul 13 Javascript
vue组件父与子通信详解(一)
Nov 07 Javascript
IE11下使用canvas.toDataURL报SecurityError错误的解决方法
Nov 19 Javascript
js input输入百分号保存数据库失败的解决方法
May 26 Javascript
利用Vue构造器创建Form组件的通用解决方法
Dec 03 Javascript
JS使用Prim算法和Kruskal算法实现最小生成树
Jan 17 Javascript
Layer.js实现表格溢出内容省略号显示,悬停显示全部的方法
Sep 16 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获取本周,上周,本月,上月,本季度日期的代码
2009/08/05 PHP
PHP实现通过中文字符比率来判断垃圾评论的方法
2014/10/20 PHP
PHP针对JSON操作实例分析
2015/01/12 PHP
纯php生成随机密码
2015/10/30 PHP
详解PHP中instanceof关键字及instanceof关键字有什么作用
2015/11/05 PHP
从零开始学习jQuery (十) jQueryUI常用功能实战
2011/02/23 Javascript
imgAreaSelect 中文文档帮助说明
2011/10/08 Javascript
php,js,css字符串截取的办法集锦
2014/09/26 Javascript
Jquery树插件zTree用法入门教程
2015/02/17 Javascript
jQuery ajax中使用confirm,确认是否删除的简单实例
2016/06/17 Javascript
AngularJs每天学习之总体介绍
2017/08/07 Javascript
JavaScript阻止表单提交方法(附代码)
2017/08/15 Javascript
JS动态修改网页body的背景色实例代码
2017/10/07 Javascript
在Vue中使用icon 字体图标的方法
2019/06/14 Javascript
webpack打包html里面img后src为“[object Module]”问题
2019/12/22 Javascript
[00:52]黑暗之门更新 新英雄孽主驾临DOTA2
2016/08/24 DOTA
使用Python的判断语句模拟三目运算
2015/04/24 Python
基于Python os模块常用命令介绍
2017/11/03 Python
Python 中包/模块的 `import` 操作代码
2019/04/22 Python
python 实现方阵的对角线遍历示例
2019/11/29 Python
美国高端婴童品牌:Hanna Andersson
2016/10/30 全球购物
Nike西班牙官方网站:Nike.com (ES)
2017/10/30 全球购物
意大利婴儿产品网上商店:Mukako
2018/10/14 全球购物
幼儿园教师教学反思
2014/02/06 职场文书
有关环保的标语
2014/06/13 职场文书
2014基层党员批评与自我批评范文
2014/09/24 职场文书
群众路线教育实践活动剖析材料
2014/09/30 职场文书
解除施工合同协议书
2014/10/17 职场文书
会计简历自我评价
2015/03/10 职场文书
承诺书范本大全
2015/05/04 职场文书
2015年为民办实事工作总结
2015/05/26 职场文书
入学证明
2015/06/23 职场文书
退休职工欢送会致辞
2015/08/01 职场文书
SQL Server 数据库实验课第五周——常用查询条件
2021/04/05 SQL Server
MySQL 角色(role)功能介绍
2021/04/24 MySQL
gateway与spring-boot-starter-web冲突问题的解决
2021/07/16 Java/Android