JS实现可展开折叠层的鼠标拖曳效果

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

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

运行效果截图如下：

在线演示地址如下：

http://演示。JB 51。net/js/2015/js-淡出-鼠标-绘制-样式-演示/

具体代码如下：

！DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN ' ' http://www .w3。org/TR/HTML 4/松散。' DTD ' HTML标题鼠标拖曳/标题/标题正文脚本类型='text/javascript '函数拖动(elementToDrag，event){ var startX=event.clientX，startY=event . clientyvar origX=elementToDrag。offsetleft，origY=elementtodrag . offsettopvar deltaX=startX-origX，deltaY=startY-origY；if(文档。addeventlistener){ document。addeventlistener(' mousemove '，moveHandler，true)；文件。addeventlistener('鼠标向上'，upHandler，true)；} else { elementtodrag。setcapture()；elementtodrag。attachevent(' onmousemove '，moveHandler)；elementtodrag。attachevent(' onmouseup '，upHandler)；elementtodrag。attachevent(' onlose capture '，upHandler)；} if(事件。stopperpagation)事件。stopperpagation()；else event . cancelubble=true if(event。preventdefault)事件。prevent default()；else事件. returnValue=false函数moveHandler(e){ if(！e)e=窗口。事件；elementtodrag。风格。left=(e . client x-deltaX)‘px’；elementtodrag。风格。top=(e . clienty-deltaY)' px '；elementtodrag。风格。zindex=' 10elementtodrag。getelementsbytagname(' p ')[0].innerHTML=' clients : ' e . clientX '/br ' ' clients : ' e . clientY '/br ' ' offset treft : ' origX '/br ' ' offset top : ' origY '/br ' ' clients x-offset treft 3360 ' deltaX '/br ' ' clientY-offset top : ' deltaY '/br '；if(e . stopperpagation)e . stopperpagation()；else e.cancelBubble=true }函数upHandler(e){ if(！e)e=窗口。事件；elementtodrag。风格。zindex=' 1if(文档。removeeventlistener){ document。removeeventlistener('鼠标向上'，upHandler，true)；文件。removeeventlistener(' mousemove '，moveHandler，true)；} else { elementtodrag。独立通风口(“onlose capture”，upHandler)；elementtodrag。独立通风口('在mouseup '上，upHandler)；elementtodrag。单独的通风口(' on mousemove '，移动处理程序)；elementtodrag。释放捕获()；} if(e . stopperpagation)e . stopperpagation()；else . cancelubble=true } }/script div style=' position : absolute；left:100pxtop:100px宽度宽度：250像素背景色： # 789;边框：1 px实心# f00 ' div style='背景： # CCC边框-底部：深黑色；在mousedown='上padd :3 pxfont-weight : bold '拖动(这。父节点，事件)'拖动Me1/div ptest/p/div div style='位置：绝对；left:100pxtop:200px宽度宽度：250像素背景色： # 789;边框：1 px实心# f00 ' div style='背景： # CCC边框-底部：深黑色；在mousedown='上padd :3 pxfont-weight : bold '拖动(这。父节点，事件)'拖动Me2/div ptest/p/div div style='位置：绝对；left:100pxtop:300px宽度宽度：250像素背景色： # 789;边框：1 px实心# f00 ' div style='背景： # CCC边框-底部：深黑色；在mousedown='上padd :3 pxfont-weight : bold '拖动(这。parentnode，event)'拖动Me3/div ptest/p/div/body/html希望本文所述对大家的Java脚本语言程序设计有所帮助。