本文介绍了一种使用JavaScript实现的简单拖拽效果。通过监听鼠标事件并计算偏移量，可以轻松地使页面元素实现拖动功能。示例中包含了一个可拖动的红色面板。
<!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> <title>JS拖动效果</title> <mce:script type="text/javascript"><!-- function DragPanel(Panel,event) { var delayX=event.clientX-parseInt(Panel.style.left); var delayY=event.clientY-parseInt(Panel.style.top); document.attachEvent("onmousemove",HandleMove); document.attachEvent("onmouseup",HandleUp); event.cancelBubble=true; event.returnValue=false; function HandleMove(e) { e=window.event; Panel.style.left=event.clientX-delayX+"px"; Panel.style.top=event.clientY-delayY+"px"; event.cancelBubble=true; } function HandleUp() { document.detachEvent("onmousemove",HandleMove); document.detachEvent("onmouseup",HandleUp); } event.cancelBubble=true; } // --></mce:script> </head> <body> <div style="position:absolute; width:200px; height:150px; left:100px; top:300px; background-color:Maroon;"> <div style="background-color:Red;" mce_style="background-color:Red;" onmousedown="DragPanel(this.parentNode,event)">Drag Me</div> </div> </body> </html>
JS拖动效果
最新推荐文章于 2025-06-24 13:38:39 发布
扫一扫
217
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
