Get-Set Sortable

A drag-and-drop sortable grid plugin with column, row and grid layout support.
One codebase — builds both a vanilla JS bundle and a React component.
CSS is injected automatically — no stylesheet import needed.

Build

npm install
npm run build

| Command | Output | Use for | |----------------------|----------------------------------|------------------| | npm run build | both outputs below | everything | | npm run build:js | dist-js/bundle.js | vanilla JS / CDN | | npm run build:react| dist/components/GSSortable.js | React / npm |

Vanilla JS

<script src="dist-js/bundle.js"></script>

<div class="list">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

<script>
  new GSSortable(document.querySelector('.list'), {
    type: 'column',
    gap: '10px',
    afterSort: (items) => console.log('sorted', items),
  });
</script>

jQuery and HTMLElement.prototype shortcuts are also available:

$('.list').GSSortable({ type: 'grid', count: 3 });
document.querySelector('.list').GSSortable({ type: 'row' });

React

CSS is injected automatically when the component mounts.

import GSSortable from '@get-set/gs-sortable';

<GSSortable type="column" gap="10px" afterSort={(items) => console.log(items)}>
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</GSSortable>

Cross-container drag (acceptFrom)

<GSSortable reference="list-a" type="column">
  <div>A1</div>
  <div>A2</div>
</GSSortable>

<GSSortable reference="list-b" type="column" acceptFrom={['list-a']}>
  <div>B1</div>
  <div>B2</div>
</GSSortable>

Parameters

| Param | Type | Default | Description | |-----------------|-------------------------------------|-------------|--------------------------------------------------------------| | reference | string | auto | Unique key. Auto-generated if omitted. | | type | 'column' \| 'row' \| 'grid' | 'column' | Layout direction. | | count | number | 3 | Columns (grid mode only). | | gap | string | '' | CSS gap, e.g. '10px' or '10px 20px'. | | handler | string | '' | CSS selector for drag handle inside each item. | | width | string | 'auto' | Item width override. | | takeClone | boolean | false | Drag a clone; original stays in place. | | allowOutOfBox | boolean | true | Allow dragging beyond container bounds. | | acceptFrom | string[] | [] | Reference keys of other instances that may drop items here. | | gsx | object | — | Inline CSS-in-JS styles (React only). | | responsive | ResponsiveOption[] | [] | Breakpoint overrides (sorted automatically). | | beforeInit | () => void | — | Callback before each layout calculation. | | afterSort | (items: NodeListOf<Element>) => void | () => {} | Callback after a sort completes. |