鼠标炫富自动展开列表html,JS实现可展开折叠层的鼠标拖曳效果

本文实例讲述了JS实现可展开折叠层的鼠标拖曳效果。分享给大家供大家参考。具体如下：

这是一款简单JS代码实现的鼠标拖曳图层效果，比较精简，大家参考一下。鼠标点击层标题栏可实现层内容的展开与折叠，按住标题栏可实现层的拖动。

运行效果截图如下：

在线演示地址如下：

具体代码如下：

/p>

"http://www.w3.org/TR/html4/loose.dtd">

鼠标拖曳

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+""+"clientY:"+e.clientY+""+"offsetLeft:"+origX+""+"offsetTop:"+origY+""+"clientX-offsetLeft:"+deltaX+""+"clientY-offsetTop:"+deltaY+"";

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;

}

}

Drag Me1

test

Drag Me2

test

Drag Me3

test

希望本文所述对大家的JavaScript程序设计有所帮助。