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 相关文章推荐
JavaScript的parseInt 进制问题
May 07 Javascript
ExtJS 工具栏 分页事件参数
Mar 05 Javascript
JS关键字球状旋转效果的实例代码
Nov 29 Javascript
使用POST方式弹出窗口的两种方法示例介绍
Jan 29 Javascript
JavaScript中创建对象和继承示例解读
Feb 12 Javascript
javascript实现给定半径求出圆的面积
Jun 26 Javascript
基于javascript实现tab切换特效
Mar 29 Javascript
浅谈js中子页面父页面方法 变量相互调用
Aug 04 Javascript
Bootstrap 模态框(Modal)带参数传值实例
Aug 20 Javascript
javascript性能优化之分时函数的介绍
Mar 28 Javascript
Vue中的作用域CSS和CSS模块的区别
Oct 09 Javascript
Angular.JS读取数据库数据调用完整实例
Jul 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函数array_merge用法一例(合并同类数组)
2013/02/03 PHP
PHPUnit测试私有属性和方法功能示例
2018/06/12 PHP
javascript判断机器是否联网的2种方法
2013/08/09 Javascript
jquery简单实现鼠标经过导航条改变背景图
2013/12/17 Javascript
jquery重复提交请求的原因浅析
2014/05/23 Javascript
javascript搜索框点击文字消失失焦时文本出现
2014/09/18 Javascript
js创建数组的简单方法
2016/07/27 Javascript
AngularJS中的Promise详细介绍及实例代码
2016/12/13 Javascript
浅谈React前后端同构防止重复渲染
2018/01/05 Javascript
vue 右键菜单插件 简单、可扩展、样式自定义的右键菜单
2018/11/29 Javascript
vue里的data要用return返回的原因浅析
2019/05/28 Javascript
js中值引用和地址引用实例分析
2019/06/21 Javascript
Vue简单封装axios之解决post请求后端接收不到参数问题
2020/02/16 Javascript
package.json中homepage属性的作用详解
2020/03/11 Javascript
[53:36]Liquid vs VP Supermajor决赛 BO 第三场 6.10
2018/07/05 DOTA
Python全局变量用法实例分析
2016/07/19 Python
浅谈Python实现Apriori算法介绍
2017/12/20 Python
Python使用SQLite和Excel操作进行数据分析
2018/01/20 Python
Python字符串匹配之6种方法的使用详解
2019/04/08 Python
Python读写文件基础知识点
2019/06/10 Python
Python中pymysql 模块的使用详解
2019/08/12 Python
Python递归及尾递归优化操作实例分析
2020/02/01 Python
Pytest参数化parametrize使用代码实例
2020/02/22 Python
Selenium+BeautifulSoup+json获取Script标签内的json数据
2020/12/07 Python
Rowdy Gentleman服装和配饰:美好时光
2019/09/24 全球购物
SIMON MILLER官网:洛杉矶的生活方式品牌
2020/10/19 全球购物
中专自荐信
2013/10/13 职场文书
入党自我鉴定
2014/03/25 职场文书
询价采购方案
2014/06/09 职场文书
读群众路线的心得体会
2014/09/03 职场文书
2015年采购部工作总结
2015/04/23 职场文书
2015年护士长个人工作总结
2015/04/24 职场文书
蜗居观后感
2015/06/11 职场文书
Canvas跟随鼠标炫彩小球的实现
2021/04/11 Javascript
tensorflow+k-means聚类简单实现猫狗图像分类的方法
2021/04/28 Python
用php如何解决大文件分片上传问题
2021/07/07 PHP