sortablejs-pinned

SortableJS plugin that keeps certain elements fixed in place while others can be sorted around them.

Works with Livewire, Alpine, Vue (preserves comment nodes).

Install

npm install sortablejs-pinned

Usage

import Sortable from 'sortablejs';
import Pinned from 'sortablejs-pinned';

Sortable.mount(Pinned());

new Sortable(document.getElementById('list'), {
  pinned: true,
  filter: '.pinned',
  animation: 150,
});

CDN:

<script src="https://cdn.jsdelivr.net/npm/sortablejs/Sortable.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sortablejs-pinned/dist/sortable-pinned.umd.min.js"></script>
<script>
  Sortable.mount(SortablePinned());
  new Sortable(document.getElementById('list'), {
    pinned: true,
    filter: '.pinned',
  });
</script>

Example

<ul id="list">
  <li class="item">Draggable 1</li>
  <li class="item pinned">Stays here</li>
  <li class="item">Draggable 2</li>
  <li class="item">Draggable 3</li>
</ul>

The .pinned element stays at index 1. Other items sort around it.

Options

| Option | Type | Description | |--------|------|-------------| | pinned | boolean | Enable the plugin | | filter | string | Selector for pinned elements |

Limitations

• group option: Cross-list dragging not supported. Comment nodes won't follow elements between lists.
• Swap plugin: May conflict - not tested.
• MultiDrag plugin: Should work, but not fully tested.

For Livewire/Alpine/Vue projects, use single-list only.

How it works

Records DOM structure at drag start, restores pinned elements after each move.

License

MIT