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 相关文章推荐
js点击事件链接的问题解决
Apr 25 Javascript
jQuery实现列表内容的动态载入特效
Aug 08 Javascript
解决angular的post请求后SpringMVC后台接收不到参数值问题的方法
Dec 10 Javascript
jquery.multiselect多选下拉框实现代码
Nov 11 Javascript
Vue响应式原理详解
Apr 18 Javascript
js和jQuery以及easyui实现对下拉框的指定赋值方法
Jan 23 jQuery
vue几个常用跨域处理方式介绍
Feb 07 Javascript
对类Vue的MVVM前端库的实现代码
Sep 07 Javascript
tracking.js页面人脸识别插件使用方法
Apr 16 Javascript
深入了解JavaScript 私有化
May 30 Javascript
Vue中axios拦截器如何单独配置token
Dec 27 Javascript
JavaScript实现与web通信的方法详解
Aug 07 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
YII模块实现绑定二级域名的方法
2014/07/09 PHP
thinkphp视图模型查询提示ERR: 1146:Table 'db.pr_order_view' doesn't exist的解决方法
2014/10/30 PHP
PHP命名空间用法实例分析
2019/09/04 PHP
Javascript String对象扩展HTML编码和解码的方法
2009/06/02 Javascript
用jquery实现学校的校历(asp.net+jquery ui 1.72)
2010/01/01 Javascript
jQuery Validation实例代码 让验证变得如此容易
2010/10/18 Javascript
判断对象是否Window的实现代码
2012/01/10 Javascript
Jquery ajax执行顺序 返回自定义错误信息(实例讲解)
2013/11/06 Javascript
javascript实现完美拖拽效果
2015/05/06 Javascript
javascript如何写热点图
2015/12/08 Javascript
深入理解jquery跨域请求方法
2016/05/18 Javascript
AngularJS学习第二篇 AngularJS依赖注入
2017/02/13 Javascript
微信小程序本作用域下调用全局JS详解及实例
2017/02/22 Javascript
JS仿淘宝搜索框用户输入事件的实现
2017/06/19 Javascript
关于vue.extend和vue.component的区别浅析
2017/08/16 Javascript
Vue源码之关于vm.$delete()/Vue.use()内部原理详解
2019/05/01 Javascript
DatePickerDialog 自定义样式及使用全解
2019/07/09 Javascript
ant-design-vue按需加载的坑的解决
2020/05/14 Javascript
python共享引用(多个变量引用)示例代码
2013/12/04 Python
Python实现输入二叉树的先序和中序遍历,再输出后序遍历操作示例
2018/07/27 Python
Python中函数参数调用方式分析
2018/08/09 Python
浅谈Python 敏感词过滤的实现
2019/08/15 Python
tensorflow对图像进行拼接的例子
2020/02/05 Python
TensorFlow实现批量归一化操作的示例
2020/04/22 Python
HTML5 canvas基本绘图之绘制阴影效果
2016/06/27 HTML / CSS
LightInTheBox法国站:中国跨境电商
2020/03/05 全球购物
员工工作表现评语
2014/04/26 职场文书
励志演讲稿300字
2014/08/21 职场文书
法英专业大学生职业生涯规划书范文
2014/09/22 职场文书
2015元旦文艺汇演主持稿(开场白+结束语)
2014/12/14 职场文书
初中教师个人总结
2015/02/10 职场文书
校车司机安全责任书
2015/05/11 职场文书
2015年高校保卫处工作总结
2015/07/23 职场文书
2016党性教育学习心得体会
2016/01/21 职场文书
2016年党员创先争优承诺书
2016/03/25 职场文书
SQL Server数据库备份和恢复数据库的全过程
2022/06/14 SQL Server