Plugins: Drag & Drop

How to load (standalone)

Drop these two tags into any HTML page — no launchpad.js required.

<link rel="stylesheet" href="/path/to/lp-dragdrop.css">
<script src="/path/to/lp-dragdrop.js" type="module"></script>

<ul data-lp-component="dragdrop">
  <li data-id="1">Item 1</li>
  <li data-id="2">Item 2</li>
</ul>

1. Basic sortable

Drag any item to reorder. Uses the native HTML5 drag-and-drop API.

Drag me anywhere
I can be reordered
No handle required
Works on touch too

<p class="lp-text-sm lp-text-muted">Drag any item to reorder. Uses the native HTML5 drag-and-drop API.</p>
<ul class="dd-demo-list" data-lp-component="dragdrop">
    <li data-id="a1">Drag me anywhere</li>
    <li data-id="a2">I can be reordered</li>
    <li data-id="a3">No handle required</li>
    <li data-id="a4">Works on touch too</li>
</ul>

2. Drag handle

Restrict drag initiation to a specific child element.

☰ Only the handle starts a drag
☰ Clicks on the text are ignored
☰ Good for rows with buttons

<p class="lp-text-sm lp-text-muted">Restrict drag initiation to a specific child element.</p>
<ul class="dd-demo-list" data-lp-component="dragdrop" data-lp-handle=".dd-handle">
    <li data-id="b1"><span class="dd-handle">☰</span> Only the handle starts a drag</li>
    <li data-id="b2"><span class="dd-handle">☰</span> Clicks on the text are ignored</li>
    <li data-id="b3"><span class="dd-handle">☰</span> Good for rows with buttons</li>
</ul>

3. Horizontal list

Direction is auto-detected from flex-direction.

Apple
Banana
Cherry
Date
Elderberry

<p class="lp-text-sm lp-text-muted">Direction is auto-detected from <code>flex-direction</code>.</p>
<ul class="dd-h-list" data-lp-component="dragdrop">
    <li data-id="h1">Apple</li>
    <li data-id="h2">Banana</li>
    <li data-id="h3">Cherry</li>
    <li data-id="h4">Date</li>
    <li data-id="h5">Elderberry</li>
</ul>

4. Grid sortable

Works with CSS grid and flex-wrap layouts.

🎨
🚀
🎯
⚡
🔥
💎
🌟
🎉

<p class="lp-text-sm lp-text-muted">Works with CSS grid and flex-wrap layouts.</p>
<ul class="dd-grid" data-lp-component="dragdrop">
    <li data-id="g1">🎨</li>
    <li data-id="g2">🚀</li>
    <li data-id="g3">🎯</li>
    <li data-id="g4">⚡</li>
    <li data-id="g5">🔥</li>
    <li data-id="g6">💎</li>
    <li data-id="g7">🌟</li>
    <li data-id="g8">🎉</li>
</ul>

5. Live reorder vs drop-only

Two modes: liveReorder: true moves items in the DOM as you drag; liveReorder: false (default) only commits on drop.

Live reorder

Live Item 1
Live Item 2
Live Item 3

Drop only (default)

Drop Item 1
Drop Item 2
Drop Item 3

<p class="lp-text-sm lp-text-muted">Two modes: <code>liveReorder: true</code> moves items in the DOM as you drag; <code>liveReorder: false</code> (default) only commits on drop.</p>
<div class="lp-d-flex lp-gap-4 lp-flex-wrap">
    <div style="flex:1; min-width:220px;">
        <p class="lp-fw-semibold lp-mb-2">Live reorder</p>
        <ul class="dd-demo-list" id="dd-live">
            <li data-id="lv1">Live Item 1</li>
            <li data-id="lv2">Live Item 2</li>
            <li data-id="lv3">Live Item 3</li>
        </ul>
    </div>
    <div style="flex:1; min-width:220px;">
        <p class="lp-fw-semibold lp-mb-2">Drop only (default)</p>
        <ul class="dd-demo-list" id="dd-drop">
            <li data-id="dr1">Drop Item 1</li>
            <li data-id="dr2">Drop Item 2</li>
            <li data-id="dr3">Drop Item 3</li>
        </ul>
    </div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function () {
    if (!window.LpDragDrop) return;
    const { DragDrop } = window.LpDragDrop;
    new DragDrop(document.getElementById("dd-live"), { liveReorder: true });
    new DragDrop(document.getElementById("dd-drop"), { liveReorder: false });
});
</script>

6. Cross-container (shared group)

Drag between containers with the same group name.

List A

Task 1
Task 2
Task 3

List B

Task 4
Task 5

<p class="lp-text-sm lp-text-muted">Drag between containers with the same <code>group</code> name.</p>
<div class="lp-d-flex lp-gap-3">
    <div class="dd-col">
        <h5>List A</h5>
        <ul data-lp-component="dragdrop" data-lp-group="shared">
            <li data-id="la1">Task 1</li>
            <li data-id="la2">Task 2</li>
            <li data-id="la3">Task 3</li>
        </ul>
    </div>
    <div class="dd-col">
        <h5>List B</h5>
        <ul data-lp-component="dragdrop" data-lp-group="shared">
            <li data-id="lb1">Task 4</li>
            <li data-id="lb2">Task 5</li>
        </ul>
    </div>
</div>

7. Kanban (asymmetric pull/put rules)

Three columns, all sharing group kanban.

Todo

Design mockup
Write spec
Gather feedback

Doing

Build API
Create UI

Done

Project kickoff

<p class="lp-text-sm lp-text-muted">Three columns, all sharing group <code>kanban</code>.</p>
<div class="lp-d-flex lp-gap-3">
    <div class="dd-col">
        <h5>Todo</h5>
        <ul id="dd-kanban-todo">
            <li data-id="k1">Design mockup</li>
            <li data-id="k2">Write spec</li>
            <li data-id="k3">Gather feedback</li>
        </ul>
    </div>
    <div class="dd-col">
        <h5>Doing</h5>
        <ul id="dd-kanban-doing">
            <li data-id="k4">Build API</li>
            <li data-id="k5">Create UI</li>
        </ul>
    </div>
    <div class="dd-col">
        <h5>Done</h5>
        <ul id="dd-kanban-done">
            <li data-id="k6">Project kickoff</li>
        </ul>
    </div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function () {
    if (!window.LpDragDrop) return;
    const { DragDrop } = window.LpDragDrop;
    new DragDrop(document.getElementById("dd-kanban-todo"),  { group: "kanban" });
    new DragDrop(document.getElementById("dd-kanban-doing"), { group: "kanban" });
    new DragDrop(document.getElementById("dd-kanban-done"),  { group: "kanban" });
});
</script>

8. Filter — pinned items are not draggable

Items matching filter selector cannot be dragged.

📌 Pinned — cannot drag
Draggable
Draggable
📌 Pinned — cannot drag
Draggable

<p class="lp-text-sm lp-text-muted">Items matching <code>filter</code> selector cannot be dragged.</p>
<ul class="dd-demo-list" data-lp-component="dragdrop" data-lp-filter=".pinned">
    <li data-id="f1" class="pinned">📌 Pinned — cannot drag</li>
    <li data-id="f2">Draggable</li>
    <li data-id="f3">Draggable</li>
    <li data-id="f4" class="pinned">📌 Pinned — cannot drag</li>
    <li data-id="f5">Draggable</li>
</ul>

9. Disabled state

Toggle drag on/off via enable() / disable().

Item 1
Item 2
Item 3

<p class="lp-text-sm lp-text-muted">Toggle drag on/off via <code>enable()</code> / <code>disable()</code>.</p>
<button type="button" class="lp-btn lp-btn-primary lp-mb-3" id="dd-toggle-disabled">Disable drag</button>
<ul class="dd-demo-list" id="dd-disabled-list">
    <li data-id="d1">Item 1</li>
    <li data-id="d2">Item 2</li>
    <li data-id="d3">Item 3</li>
</ul>
<script>
document.addEventListener("DOMContentLoaded", function () {
    if (!window.LpDragDrop) return;
    const inst = new window.LpDragDrop.DragDrop(document.getElementById("dd-disabled-list"));
    const btn = document.getElementById("dd-toggle-disabled");
    btn.addEventListener("click", function () {
        if (inst.options.disabled) { inst.enable(); btn.textContent = "Disable drag"; }
        else { inst.disable(); btn.textContent = "Enable drag"; }
    });
});
</script>

10. Storage persistence (localStorage)

Reorder, then refresh the page — order is remembered.

Persisted item 1
Persisted item 2
Persisted item 3
Persisted item 4

<p class="lp-text-sm lp-text-muted">Reorder, then refresh the page — order is remembered.</p>
<button type="button" class="lp-btn lp-btn-secondary lp-mb-3" id="dd-clear-storage">Clear saved order</button>
<ul class="dd-demo-list" id="dd-storage-list" data-lp-component="dragdrop" data-lp-storage="local" data-lp-storage-key="lp-dragdrop-demo-10">
    <li data-id="p1">Persisted item 1</li>
    <li data-id="p2">Persisted item 2</li>
    <li data-id="p3">Persisted item 3</li>
    <li data-id="p4">Persisted item 4</li>
</ul>
<script>
document.addEventListener("DOMContentLoaded", function () {
    const btn = document.getElementById("dd-clear-storage");
    btn.addEventListener("click", function () {
        const inst = window.LpDragDrop.DragDrop.get(document.getElementById("dd-storage-list"));
        inst?.clearStorage();
        location.reload();
    });
});
</script>

11. Callbacks (onStart, onEnd, onReorder)

Wire up callbacks via the constructor options.

Callback 1
Callback 2
Callback 3

<p class="lp-text-sm lp-text-muted">Wire up callbacks via the constructor options.</p>
<ul class="dd-demo-list" id="dd-cb-list">
    <li data-id="c1">Callback 1</li>
    <li data-id="c2">Callback 2</li>
    <li data-id="c3">Callback 3</li>
</ul>
<div class="dd-log" id="dd-cb-log"></div>
<script>
document.addEventListener("DOMContentLoaded", function () {
    if (!window.LpDragDrop) return;
    const log = document.getElementById("dd-cb-log");
    const push = (name, d) => {
        const line = document.createElement("div");
        line.textContent = new Date().toLocaleTimeString() + "  " + name + (d?.item ? " — " + d.item.textContent.trim() : "");
        log.insertBefore(line, log.firstChild);
    };
    new window.LpDragDrop.DragDrop(document.getElementById("dd-cb-list"), {
        onStart:    (d) => push("onStart", d),
        onMove:     () => push("onMove"),
        onReorder:  (d) => push("onReorder", d),
        onEnd:      (d) => push("onEnd", d),
    });
});
</script>

12. Custom DOM events

Listen via element.addEventListener("lp:dragdrop:start", ...). Events bubble, so you can also listen on any ancestor.

Event item 1
Event item 2
Event item 3

<p class="lp-text-sm lp-text-muted">
    Listen via <code>element.addEventListener("lp:dragdrop:start", ...)</code>.
    Events bubble, so you can also listen on any ancestor.
</p>
<ul class="dd-demo-list" id="dd-evt-list" data-lp-component="dragdrop">
    <li data-id="e1">Event item 1</li>
    <li data-id="e2">Event item 2</li>
    <li data-id="e3">Event item 3</li>
</ul>
<div class="dd-log" id="dd-evt-log"></div>
<script>
document.addEventListener("DOMContentLoaded", function () {
    const list = document.getElementById("dd-evt-list");
    const log  = document.getElementById("dd-evt-log");
    const push = (name, e) => {
        const line = document.createElement("div");
        const itemTxt = e.detail?.item ? " — " + e.detail.item.textContent.trim() : "";
        line.textContent = new Date().toLocaleTimeString() + "  " + name + itemTxt;
        log.insertBefore(line, log.firstChild);
    };
    ["start","move","reorder","end","add","remove","filter"].forEach(function (n) {
        list.addEventListener("lp:dragdrop:" + n, (e) => push("lp:dragdrop:" + n, e));
    });
});
</script>

12. API methods

One
Two
Three
Four

<div class="lp-d-flex lp-gap-2 lp-mb-3 lp-flex-wrap">
    <button type="button" class="lp-btn lp-btn-sm lp-btn-primary" id="dd-api-get">getOrder()</button>
    <button type="button" class="lp-btn lp-btn-sm lp-btn-secondary" id="dd-api-reverse">setOrder(reverse)</button>
    <button type="button" class="lp-btn lp-btn-sm lp-btn-secondary" id="dd-api-refresh">refresh()</button>
    <button type="button" class="lp-btn lp-btn-sm lp-btn-danger" id="dd-api-destroy">destroy()</button>
</div>
<ul class="dd-demo-list" id="dd-api-list">
    <li data-id="x1">One</li>
    <li data-id="x2">Two</li>
    <li data-id="x3">Three</li>
    <li data-id="x4">Four</li>
</ul>
<pre id="dd-api-output" class="lp-mt-2 lp-text-sm"></pre>
<script>
document.addEventListener("DOMContentLoaded", function () {
    if (!window.LpDragDrop) return;
    const el = document.getElementById("dd-api-list");
    let inst = new window.LpDragDrop.DragDrop(el);
    const out = document.getElementById("dd-api-output");
    document.getElementById("dd-api-get").addEventListener("click", () => {
        out.textContent = JSON.stringify(inst.getOrder());
    });
    document.getElementById("dd-api-reverse").addEventListener("click", () => {
        inst.setOrder(inst.getOrder().reverse());
        out.textContent = "setOrder(reversed)";
    });
    document.getElementById("dd-api-refresh").addEventListener("click", () => {
        inst.refresh();
        out.textContent = "refresh() called";
    });
    document.getElementById("dd-api-destroy").addEventListener("click", () => {
        inst.destroy();
        out.textContent = "destroyed";
    });
});
</script>

13. Different element types

Works with any HTML element, not just <li>. Here are <div>s and a sortable table body.

Divs

Div 1

Div 2

Div 3

Table rows

#	Name	Role
1	Alice	Admin
2	Bob	Editor
3	Carol	Viewer

<p class="lp-text-sm lp-text-muted">Works with any HTML element, not just <code>&lt;li&gt;</code>. Here are <code>&lt;div&gt;</code>s and a sortable table body.</p>

<p class="lp-fw-semibold lp-mb-2 lp-mt-3">Divs</p>
<div class="dd-demo-list" data-lp-component="dragdrop" style="display:block;">
    <div data-id="v1" style="padding:0.75rem 1rem;margin-bottom:6px;background:var(--lp-surface);border:1px solid var(--lp-border);border-radius:var(--lp-radius-md);">Div 1</div>
    <div data-id="v2" style="padding:0.75rem 1rem;margin-bottom:6px;background:var(--lp-surface);border:1px solid var(--lp-border);border-radius:var(--lp-radius-md);">Div 2</div>
    <div data-id="v3" style="padding:0.75rem 1rem;margin-bottom:6px;background:var(--lp-surface);border:1px solid var(--lp-border);border-radius:var(--lp-radius-md);">Div 3</div>
</div>

<p class="lp-fw-semibold lp-mb-2 lp-mt-4">Table rows</p>
<table class="dd-table">
    <thead><tr><th>#</th><th>Name</th><th>Role</th></tr></thead>
    <tbody data-lp-component="dragdrop">
        <tr data-id="r1"><td>1</td><td>Alice</td><td>Admin</td></tr>
        <tr data-id="r2"><td>2</td><td>Bob</td><td>Editor</td></tr>
        <tr data-id="r3"><td>3</td><td>Carol</td><td>Viewer</td></tr>
    </tbody>
</table>

Configuration reference

Option	Type	Default	Purpose
`items`	selector	`null`	Which descendants are draggable (falls back to direct children)
`handle`	selector	`null`	Restrict drag to a handle element inside each item
`filter`	selector\\|fn	`null`	Items matching are NOT draggable
`group`	string\\|object	`null`	Group name for cross-container drag (`{name, pull, put}`)
`liveReorder`	boolean	`false`	Move DOM during drag instead of only on drop
`accept`	selector\\|fn	`null`	Validate drop targets
`disabled`	boolean	`false`	Initially disabled
`storage`	"local"\\|"session"	`null`	Persistence backend
`storageKey`	string	auto from `el.id`	Custom storage key
`dataIdAttr`	string	`"data-id"`	Attribute used for order serialization
`dragRotation`	boolean	`true`	Tilt the drag ghost 2° for visual flair
`eventPrefix`	string	`"lp"`	Prefix for dispatched DOM CustomEvents (e.g. `lp:dragdrop:start`)
`onStart, onMove, onReorder, onEnd, onAdd, onRemove, onFilter`	function	`noop`	Lifecycle callbacks

Data attributes (for auto-init)

Any option can be set declaratively via data-lp-*. kebab-case converts to camelCase.

Attribute	Maps to
`data-lp-component="dragdrop"`	Enables auto-init on the element
`data-lp-handle=".handle"`	`handle: ".handle"`
`data-lp-filter=".pinned"`	`filter: ".pinned"`
`data-lp-group="shared"`	`group: "shared"`
`data-lp-live-reorder="true"`	`liveReorder: true`
`data-lp-storage="local"`	`storage: "local"`
`data-lp-storage-key="my-key"`	`storageKey: "my-key"`
`data-lp-disabled="true"`	`disabled: true`

Events reference

All events are CustomEvents dispatched on the container element. They bubble — you can listen on any ancestor. Every event carries a detail object with the relevant items.

Event	Fires when	`event.detail`
`lp:dragdrop:start`	A drag begins (dragstart fired, ghost captured)	`{ item, from }`
`lp:dragdrop:move`	Cursor moves over an item during drag (every dragover)	`{ item, from, to }`
`lp:dragdrop:reorder`	An item has been dropped to a new position	`{ item, from, to }`
`lp:dragdrop:add`	An item was added to this container from another (cross-group drop)	`{ item, from, to }`
`lp:dragdrop:remove`	An item was removed from this container into another	`{ item, from, to }`
`lp:dragdrop:end`	Drag ends, whether dropped or cancelled	`{ item, from }`
`lp:dragdrop:filter`	A drag was blocked because the item matched the filter	`{ item }`

Change the prefix via the eventPrefix option (defaults to "lp"). Setting it to "app" produces app:dragdrop:start, etc.

CSS classes applied by the plugin

Class	Applied to
`.lp-dragdrop-drag`	Source item while it is being dragged (dimmed)
`.lp-dragdrop-over`	Item currently being dragged over
`.lp-dragdrop-over-before`	Drop indicator: drop will land before this item
`.lp-dragdrop-over-after`	Drop indicator: drop will land after this item
`.lp-dragdrop-over-empty`	Empty container accepting drop at end
`.lp-dragdrop-reject`	Target refuses the drop (accept validation failed)
`.lp-dragdrop-disabled`	Whole container with drag disabled