dlsjs 文档站

Chinese

English

Chinese

English

夜间模式

movePanel / moveRelate ​

movePanel 和 moveRelate 用于实现元素的拖拽功能。movePanel 用于拖动绝对定位的元素，moveRelate 用于拖动相对定位的元素。

语法 ​

javascript
movePanel(eventDown, selector, restrictionType)
moveRelate(eventDown, selector)

参数 ​

movePanel ​

  • eventDown MouseEvent
    • 鼠标按下事件对象，通常作为 mousedown 事件回调的第一个参数传入。
  • selector string
    • 弹窗元素的选择器，函数内部通过 document.querySelector 获取目标元素。
  • restrictionType string
    • 限制类型，用于控制拖动的边界行为，默认值为 'drag-point'。
    • 可选值：
      • 'none'：无限制，元素可拖动到任意位置
      • 'full'：限制整个弹窗始终在屏幕可视区域内
      • 'drag-point'：限制拖动点（鼠标按下的位置）在屏幕可视区域内（默认）

moveRelate ​

  • eventDown MouseEvent
    • 鼠标按下事件对象，通常作为 mousedown 事件回调的第一个参数传入。
  • selector string
    • 弹窗元素的选择器，函数内部通过 document.querySelector 获取目标元素。

返回值 ​

undefined

两个函数均无返回值，直接通过修改元素的 style.left 和 style.top 实现位置更新。

描述 ​

movePanel 适用于绝对定位（position: absolute 或 position: fixed）的元素。函数内部通过 eventDown.layerX 和 eventDown.layerY 记录鼠标按下时相对于事件源元素的偏移量，再在 mousemove 事件中根据鼠标当前位置与偏移量计算元素的新位置。支持三种边界限制模式，可根据需要选择。

moveRelate 适用于相对定位（position: relative）的元素。函数通过 eventDown.pageX 和 eventDown.pageY 记录鼠标按下时的页面坐标，并结合元素当前的 left/top 样式值作为起始位置，在 mousemove 事件中根据鼠标位移量更新元素位置。

两个函数均在 mouseup 事件触发时清除 mousemove 和 mouseup 监听，结束拖动。

注意事项 ​

  1. 调用前需确保目标元素已设置 position: absolute、position: fixed（movePanel）或 position: relative（moveRelate），否则 style.left/style.top 不会生效。
  2. movePanel 依赖 eventDown.layerX/eventDown.layerY 属性，该属性为非标准属性，部分浏览器对嵌套元素的取值可能存在差异，建议将事件监听绑定在需要拖动的元素本身。
  3. moveRelate 通过 parseInt 解析元素的 style.left/style.top，首次拖动时若未设置过样式会以 0 作为起始值。
  4. 函数直接覆盖 document.onmousemove 和 document.onmouseup，因此同一时间只能拖动一个元素，新拖动会覆盖上一次未结束的监听。
  5. 目标元素的选择器必须能在文档中匹配到唯一元素，函数内部使用 querySelector 取第一个匹配项。

示例 ​

使用 movePanel 拖动绝对定位元素 ​

使用 moveRelate 拖动相对定位元素 ​

浏览器兼容性 ​

  • 两个函数均依赖浏览器 DOM API，只能在浏览器环境中使用。
  • movePanel 使用的 layerX/layerY 为非标准属性，在现代浏览器（Chrome、Firefox、Edge）中可用，但 Safari 早期版本可能不支持。
  • moveRelate 使用的 pageX/pageY 为标准属性，兼容所有现代浏览器。

性能考虑 ​

  • 时间复杂度: O(1) - 拖动过程中每次 mousemove 的处理仅做简单坐标计算与样式赋值。
  • 拖动过程中 mousemove 事件触发频率较高，函数直接操作 document.onmousemove，未使用节流，但计算量极小，性能开销可忽略。
  • 每次拖动都会通过 document.querySelector 查询元素，moveRelate 在 mousemove 回调中也会重复查询，若对性能有更高要求可在拖动开始前缓存元素引用。

相关函数 ​