Element Draggable

A lightweight draggable library.

このスクリプトは単体で利用できません。右のようなメタデータを含むスクリプトから、ライブラリとして読み込まれます: // @require https://update.greasyfork.org/scripts/587662/1879553/Element%20Draggable.js

このスクリプトの質問や評価の投稿はこちら、通報はこちらへお寄せください

作者: ryxel
バージョン: 1.0
作成日: 2026/07/19
更新日: 2026/07/19
大きさ: 6.28KB
ライセンス: MIT

Draggable

A JavaScript library for dragging elements, usable in Tampermonkey scripts or regular web pages.

Usage

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

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

const drag = new Draggable(element, options);

Parameters

element (HTMLElement): The target DOM element to be dragged.
options (Object, optional): Configuration object.

Options Configuration

Parameter	Type	Default	Description
handle	HTMLElement	element	Specifies the drag handle.
savePosition	boolean	false	Whether to save the element position.
id	string	null	Unique identifier used for saving the position. Only works when `savePosition` is `true`.

Notes

A unique id must be provided when position saving is enabled.
When using in a Tampermonkey script, if position saving is enabled, it is recommended to declare the following permissions in the script header:

// @grant GM_getValue
// @grant GM_setValue

With these permissions, position data will be stored through the userscript manager and can persist across pages.

If the permissions are not declared, position data will be stored in the current page's localStorage.

Destroy Instance

When the dragging functionality is no longer needed or the element is removed, the instance should be manually destroyed to release resources and remove event listeners.

drag.destroy();