JS实现可展开折叠层的鼠标拖曳效果
更新时间：2015年10月09日 10:01:31 作者：企鹅
这篇文章主要介绍了JS实现可展开折叠层的鼠标拖曳效果,具有展开折叠层及实时显示鼠标坐标位置的功能,具有一定参考借鉴价值,需要的朋友可以参考下
本文实例讲述了JS实现可展开折叠层的鼠标拖曳效果。分享给大家供大家参考。具体如下：
这是一款简单JS代码实现的鼠标拖曳图层效果，比较精简，大家参考一下。鼠标点击层标题栏可实现层内容的展开与折叠，按住标题栏可实现层的拖动。
运行效果截图如下：
在线演示地址如下：
http://demo.jb51.net/js/2015/js-fade-out-mouse-draw-style-demo/
具体代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>鼠标拖曳</title>
</head>
<body>
<script type="text/javascript">
function drag(elementToDrag,event){
var startX=event.clientX,startY=event.clientY;
var origX=elementToDrag.offsetLeft,origY=elementToDrag.offsetTop;
var deltaX=startX-origX,deltaY=startY-origY;
if(document.addEventListener){
document.addEventListener("mousemove",moveHandler,true);
document.addEventListener("mouseup",upHandler,true);
}
else{
elementToDrag.setCapture();
elementToDrag.attachEvent("onmousemove",moveHandler);
elementToDrag.attachEvent("onmouseup",upHandler);
elementToDrag.attachEvent("onlosecapture",upHandler);
}
if(event.stopPropagation) event.stopPropagation();
else event.cancelBubble=true;
if(event.preventDefault) event.preventDefault();
else event.returnValue=false;
function moveHandler(e){
if(!e) e=window.event;
elementToDrag.style.left=(e.clientX-deltaX)+"px";
elementToDrag.style.top=(e.clientY-deltaY)+"px";
elementToDrag.style.zIndex="10";
elementToDrag.getElementsByTagName("p")[0].innerHTML="clientX:"+e.clientX+"</br>"+"clientY:"+e.clientY+"</br>"+"offsetLeft:"+origX+"</br>"+"offsetTop:"+origY+"</br>"+"clientX-offsetLeft:"+deltaX+"</br>"+"clientY-offsetTop:"+deltaY+"</br>";
if(e.stopPropagation) e.stopPropagation();
else e.cancelBubble = true;
}
function upHandler(e){
if(!e) e=window.event;
elementToDrag.style.zIndex="1";
if(document.removeEventListener){
document.removeEventListener("mouseup",upHandler,true);
document.removeEventListener("mousemove",moveHandler,true);
}
else{
elementToDrag.detachEvent("onlosecapture",upHandler);
elementToDrag.detachEvent("onmouseup",upHandler);
elementToDrag.detachEvent("onmousemove",moveHandler);
elementToDrag.releaseCapture();
}
if(e.stopPropagation) e.stopPropagation();
else e.cancelBubble=true;
}
}
</script>
<div style="position:absolute;left:100px;top:100px;width:250px;background-color:#789;border:1px solid #f00">
<div style="background:#ccc;border-bottom:dotted black;padding:3px;font-weight:bold" onmousedown="drag(this.parentNode,event)">Drag Me1</div>
<p>test</p>
</div>
<div style="position:absolute;left:100px;top:200px;width:250px;background-color:#789;border:1px solid #f00">
<div style="background:#ccc;border-bottom:dotted black;padding:3px;font-weight:bold" onmousedown="drag(this.parentNode,event)">Drag Me2</div>
<p>test</p>
</div>
<div style="position:absolute;left:100px;top:300px;width:250px;background-color:#789;border:1px solid #f00">
<div style="background:#ccc;border-bottom:dotted black;padding:3px;font-weight:bold" onmousedown="drag(this.parentNode,event)">Drag Me3</div>
<p>test</p>
</div>
</body>
</html>
希望本文所述对大家的JavaScript程序设计有所帮助。
相关文章
这篇文章主要介绍了如何使用JavaScript检测空闲的浏览器选项卡，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-05-05
下面小编就为大家带来一篇超级简易的JS计算器实例讲解(实现加减乘除)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
这篇文章主要介绍了JS实现获取进今年第几天是周几的方法,结合实例形式对比分析了JavaScript进行日期与天数运算相关操作技巧与注意事项,需要的朋友可以参考下2018-06-06
这篇文章主要介绍了JavaScript实现常用二级省市级联下拉列表的方法,实例分析了javascript实现级联下拉列表的技巧与相关的元素操作方法,需要的朋友可以参考下2015-03-03
今天小编就为大家分享一篇layui数据表格重载实现往后台传参，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
这篇文章主要为大家详细介绍了javascript实现移动端上传图片功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-08-08
这篇文章主要介绍了JS中获取函数调用链所有参数的方法,本文直接给出代码示例,需要的朋友可以参考下2015-05-05
这篇文章主要介绍了JavaScript实现单链表过程，链表中的元素在内存中不必是连续的空间。链表的每个元素有一个存储元素本身的节点和指向下一个元素的引用。下面请和小编一起进入文章了解更多的详细内容吧2021-12-12
这篇文章主要介绍了微信小程序实用代码段，代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2019-12-12
微信小程序中没有select下拉选项框，所以只有自定义。这篇文章主要介绍了微信小程序自定义select下拉选项框组件,需要的朋友可以参考下2018-08-08
最新评论