JS实现网页Div层Clone拖拽效果
更新时间：2015年09月26日 09:58:49 作者：企鹅
这篇文章主要介绍了JS实现网页Div层Clone拖拽效果,涉及JavaScript响应鼠标事件动态改变页面元素位置属性及层级属性的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
本文实例讲述了JS实现网页Div层Clone拖拽效果。分享给大家供大家参考。具体如下：
这是一个层拖动，网页上的拖拽Clone效果实例，两个层可在鼠标的拖动下，任意改变位置，智能判断层级，也就是智能判断自身是否处于最高层，最高处的层是不会被其它层遮挡的。
运行效果截图如下：
在线演示地址如下：
http://demo.jb51.net/js/2015/js-draw-box-clone-style-codes/
<!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程序设计有所帮助。
相关文章
这篇文章主要介绍了JS复制内容到剪切板的实例代码(兼容IE与火狐)。需要的朋友可以过来参考下，希望对大家有所帮助2013-11-11
IE Firefox 使用自定义标签的区别，需要的朋友可以参考下。2009-10-10
CommonJS是Node中的一种模块化规范，本文主要介绍了Webpack是如何打包CJS的，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-05-05
这篇文章主要为大家详细介绍了微信小程序自定义底部导航，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-11-11
这篇文章主要介绍了微信小程序解析富文本过程详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值2019-07-07
在JavaScript中,除了Object之外,Array类型恐怕就是最常用的类型了,与其他语言的数组有着很大的区别,JavaScript中的Array非常灵活,今天我就来总结了一下JavaScript中Array删除的方法,感兴趣的朋友跟随小编一起看看吧2023-12-12
JavaScript函数之call、apply以及bind方法案例详解
这篇文章主要介绍了JavaScript函数之call、apply以及bind方法案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下2021-08-08
这篇文章给大家总结下JavaScript数组去重的几种方法，面试中也经常会遇到这个问题。文中给大家引申的还有合并数组并去重的方法，感兴趣的朋友跟随脚本之家小编一起学习吧2021-10-10![js中[]、{}、()区别示例浅析](//img.jbzj.com/images/xgimg/bcimg8.png)
很多人都知道在js中[]表示的是数组对象,{}表示的是对象,但是这两者的区别却说不出来,下面这篇文章主要给大家介绍了关于js中[]、{}、()区别的相关资料,需要的朋友可以参考下2023-06-06
用eval方法，把传进来的这个方法名所代表的方法当作一个对象来赋值给method1的func属性,需要的朋友可以参考下2014-04-04
![js中[]、{}、()区别示例浅析](http://img.jbzj.com/images/xgimg/bcimg8.png)
最新评论