Interaction Plugin

GS Sortable

Draggable list re-ordering manager with smooth swap animations, drag handles, and touch screen support.

Latest: v1.1.1

Downloads last month: 706

Visit Demo Website

Install Package

npm i @get-set/gs-sortable

or via CDN

<link rel="stylesheet" href="https://cdn.get-set.it/gs-sortable/latest/gs-sortable.min.css">
<script src="https://cdn.get-set.it/gs-sortable/latest/gs-sortable.min.js"></script>

Interactive Playground

Live Sandbox

Sortable.jsx

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

export default function App() {
  return (
    <Sortable
      type="column"
    >
      <div className="item">Phase A: Discovery</div>
      <div className="item">Phase B: Core Development</div>
      <div className="item">Phase C: Refinement</div>
    </Sortable>
  );
}

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

export default function App() {
  return (
    <Sortable
      type="column"
    >
      <div className="item">Phase A: Discovery</div>
      <div className="item">Phase B: Core Development</div>
      <div className="item">Phase C: Refinement</div>
    </Sortable>
  );
}

Live Preview

Phase A: DiscoveryDrag Handle

Phase B: Core DevelopmentDrag Handle

Phase C: RefinementDrag Handle

Options

Configuration Values

Layout Type

Grid Columns

Gap

Drag Handle

Custom Handle Selector

Ghost Style

Reflow Duration (ms)

Theme

Drag Class

Ghost Class

Reference Key

Feature Flags

Take CloneAllow Out of BoxLift EffectDrop-zone HighlightCard Styling

API Specifications

Option	Type	Default	Description
type	'column' \| 'row' \| 'grid'	'column'	List display layout configuration.
count	number	3	Matrix columns count (grid mode).
gap	string	'12rem'	Spaces between sort items.
allowOutOfBox	boolean	true	Permit drag items out of box boundary.
takeClone	boolean	false	Drag element duplicates.
animation	number	200	Reorder transition speed in ms.
disabled	boolean	false	Disable dragging triggers.

Technical Features

Swap Physics

Smooth visual slide swapping as children get dragged.

Drag Handles

Restrict drag initiation to specific sub-elements.

Touch Support

Native touch-start listener loops for mobile lists.

State Management

Exposes clean array reordering indices on drop.

import Sortable from '@get-set/gs-sortable'; export default function App() { return ( <Sortable type="column" > <div className="item">Phase A: Discovery</div> <div className="item">Phase B: Core Development</div> <div className="item">Phase C: Refinement</div> </Sortable> ); }

API Specifications

Option	Type	Default	Description
type	'column' \| 'row' \| 'grid'	'column'	List display layout configuration.
count	number	3	Matrix columns count (grid mode).
gap	string	'12rem'	Spaces between sort items.
allowOutOfBox	boolean	true	Permit drag items out of box boundary.
takeClone	boolean	false	Drag element duplicates.
animation	number	200	Reorder transition speed in ms.
disabled	boolean	false	Disable dragging triggers.