本文介绍一个支持Firefox浏览器的JavaScript DIV拖动类，通过简单的onmousedown事件调用即可实现拖拽功能。重点解析如何在拖动过程中检测指定位置，并实现层自动吸附到目标区域的逻辑，从而完成灵活的拖拽布局效果。
DIV拖动功能实现与自动吸附逻辑
实现该功能的核心在于调用方法的配置。
在HTML元素中，通过绑定 onmousedown 事件来触发拖动逻辑，具体调用格式为 MyMove.Move('InfoKuang', event, 1)，其中 'InfoKuang' 为目标层ID，event 为鼠标事件对象，1 为相关参数。
用户关注的核心问题是如何在拖动过程中，当元素移动到特定坐标或区域时，自动触发吸附效果，使其精准对齐到指定位置。
这种机制通常被称为“自动吸附”或“磁吸”功能，旨在提升拖拽布局的用户体验，使元素排列更加整齐有序。
<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Div Move Temp</title> <style> #InfoKuang { position:absolute; width:130px; height:85px; z-index:1; filter:alpha(Opacity=60,style=0); opacity:0.6; padding: 3px; border: 1px dashed #000000; z-index:5000; bottom:31px; font-size:9pt; } #InfoKuang ul { margin: 1px; padding: 0px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: none; border-right-style: none; border-bottom-style: solid; border-left-style: none; border-top-color: #000000; border-right-color: #000000; border-bottom-color: #000000; border-left-color: #000000; color: #000000; background-color:#0faead; } #InfoKuang li { height:24px; padding: 1px; line-height: 24px; } </style> </head> <body> <div id="InfoKuang" onmousedown="MyMove.Move('InfoKuang',event,1)"> <span style="cursor:move;">点我调用 拖动窗口</span> <ul> <li> </li> </ul> <ul> <li> 显示窗口 </li> </ul> <ul> <li> 最大化窗口 </li> </ul> </div> </body> </html>注意：若引入了外部JavaScript文件，必须在修改代码后刷新页面，以确保新脚本生效并执行。