☰

Element Draggable

一个轻量级的元素拖拽库。

此脚本不应直接安装。它是供其他脚本使用的外部库，要使用该库请加入元指令 // @require https://update.greasyfork.org/scripts/587662/1879553/Element%20Draggable.js

如何安装

您需要先安装一款用户脚本管理器扩展，例如 Tampermonkey 篡改猴、Greasemonkey 油猴子 或 Violentmonkey 暴力猴，才能安装此脚本。

您需要先安装一款用户脚本管理器扩展，例如 Tampermonkey 篡改猴，才能安装此脚本。

您需要先安装一款用户脚本管理器扩展，例如 Tampermonkey 篡改猴 或 Violentmonkey 暴力猴，才能安装此脚本。

您需要先安装一款用户脚本管理器扩展，例如 Tampermonkey 篡改猴 或 Userscripts ，才能安装此脚本。

您需要先安装一款用户脚本管理器扩展，例如 Tampermonkey 篡改猴，才能安装此脚本。

您需要先安装一款用户脚本管理器扩展后才能安装此脚本。

（我已经安装了用户脚本管理器，让我安装！）

如何安装

您需要先安装一款用户样式管理器扩展，比如 Stylus，才能安装此样式。

您需要先安装一款用户样式管理器扩展，比如 Stylus，才能安装此样式。

您需要先安装一款用户样式管理器扩展，比如 Stylus，才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

（我已经安装了用户样式管理器，让我安装！）

作者
ryxel
版本
1.0
创建于
2026-07-19
更新于
2026-07-19
大小
6.3 KB
许可证
MIT

Draggable

用于元素拖拽的 JavaScript 库，可用于油猴脚本或普通网页。

使用方法

const element = document.querySelector('#element');
const handle = document.querySelector('#handle');

const options = {
    handle: handle,
    savePosition: true,
    id: 'example'
};

const drag = new Draggable(element, options);

参数说明

  • element (HTMLElement)：需要拖拽的目标 DOM 元素。
  • options (Object，可选)：配置项对象。

Options 配置项

参数 类型 默认值 说明
handle HTMLElement element 指定用于拖拽的手柄。
savePosition boolean false 是否保存元素位置。
id string null 保存位置时使用的唯一标识，仅在 savePosition 为 true 时生效。

注意事项

  • 开启位置保存功能时，必须设置唯一的 id。
  • 在油猴脚本中使用时，如果开启了位置保存功能，建议在脚本头部声明：
// @grant GM_getValue
// @grant GM_setValue

声明权限后，位置数据会通过油猴管理器保存，可跨页面使用。

如果未声明相关权限，位置数据将默认存储在当前页面的 localStorage 中。

销毁实例

当不再需要拖拽功能或移除元素时，应当手动销毁实例，以释放资源并移除事件监听。

drag.destroy();