本文实例讲述了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>
以上就是js实现可展开折叠层的鼠标拖曳效果_javascript技巧的内容。