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

``bash
npm install sortablejs-pinned
`

Usage

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

Sortable.mount(Pinned());

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

CDN:

`html



`

Example

`html


• Draggable 1


• Stays here


• Draggable 2


• Draggable 3


`

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