JS实现网页Div层Clone拖拽效果
编程学习 2021-07-04 21:03www.dzhlxh.cn编程入门
这篇文章主要介绍了JS实现网页Div层Clone拖拽效果,涉及JavaScript响应鼠标事件动态改变页面元素位置属性及层级属性的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
本文实例讲述了JS实现网页Div层Clone拖拽效果。分享给大家供大家参考。具体如下：
这是一个层拖动，网页上的拖拽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程序设计有所帮助。
上一篇：JS实现可拖曳、可关闭的弹窗效果
下一篇：jQuery超简单选项卡完整实例