hcg-sortable - Live Demo

Interactive demos of hcg-sortable, a lightweight zero-dependency JavaScript library for reorderable lists, rows, and grids. Try axis modes, connected lists, drag handles, custom placeholders, auto-scroll, and instance methods. Version . Full documentation

1. Vertical list (axis: y)

Default vertical sorting. All lifecycle callbacks fire into the event log at the bottom.

Try it
  • Item A
  • Item B
  • Item C
  • Item D
View usage code 
new HcgSortable('#list-y', {
  axis: 'y',
  placeholder: true,
  animation: 150,
  onUpdate(d) { console.log(d.oldIndex, '->', d.newIndex); }
});

2. Horizontal row (axis: x)

Set axis: 'x' to sort items in a horizontal row.

Try it
One
Two
Three
Four
Five
View usage code 
new HcgSortable('#list-x', {
  axis: 'x',
  placeholder: true,
  animation: 150
});

3. Grid (axis: grid)

Use axis: 'grid' for two-dimensional grid layouts.

Try it
1
2
3
4
5
6
7
8
View usage code 
new HcgSortable('#list-grid', {
  axis: 'grid',
  placeholder: true,
  animation: 150
});

4. Auto direction (axis: 'auto')

With axis: 'auto', the library detects layout direction. This flex row resolves to horizontal.

Try it
Auto 1
Auto 2
Auto 3
Auto 4
View usage code 
new HcgSortable('#list-auto', {
  axis: 'auto',
  placeholder: true,
  animation: 150
});

5. Drag handle + filter

handle: '.handle' starts the drag; the button is in filter and never drags.

Try it
  • ☰ Drag by handle
  • ☰ Handle only
  • ☰ Body won't drag
View usage code 
new HcgSortable('#list-handle', {
  axis: 'y',
  handle: '.handle',
  filter: '.no-drag'
});

6. Connected lists (group)

Drag items between lists that share group: 'shared'.

Try it

List A

  • A-1
  • A-2
  • A-3

List B

  • B-1
  • B-2
View usage code 
var opts = {
  axis: 'y',
  animation: 150,
  group: { name: 'shared', pull: true, put: true }
};
new HcgSortable('#conn-a', opts);
new HcgSortable('#conn-b', opts);

7. Custom placeholder + animation

Custom placeholder HTML, animation: 250, dragThreshold: 8, and a custom className.

Try it
  • Fancy 1
  • Fancy 2
  • Fancy 3
  • Fancy 4
View usage code 
new HcgSortable('#list-custom', {
  axis: 'y',
  placeholder: '<li class="item ghost-custom">drop here</li>',
  className: 'dragging-custom',
  animation: 250,
  dragThreshold: 8
});

8. Auto-scroll + containment

scroll, scrollSpeed, scrollThreshold, and containment keep dragging inside a scrollable box.

Try it
View usage code 
new HcgSortable('#list-scroll', {
  axis: 'y',
  scroll: true,
  scrollSpeed: 14,
  scrollThreshold: 36,
  containment: document.getElementById('list-scroll')
});

9. Instance methods

Exercise option(), enable(), disable(), and destroy() on a live instance.

Try it
  • Method 1
  • Method 2
  • Method 3

View usage code 
var api = new HcgSortable('#list-api', { axis: 'y', animation: 150 });

api.disable();
api.enable();
api.option('animation');           // get
api.setOption('animation', 250);   // set
api.destroy();

Event log

Lifecycle callbacks from every demo above are logged here in real time.

Callbacks