Sortable

Default functionality

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6

Display as grid

One
Two
Three
Four
Five
Six
Seven
Eight
Nine

Selectable

Default functionality

  1. Cras justo odio
  2. Dapibus ac facilisis in
  3. Morbi leo risus
  4. Porta ac consectetur ac
  5. Vestibulum at eros

Display as grid

One
Two
Three
Four
Five
Six
Seven
Eight

Resizable

Default functionality

Resizable

Resize me by dragging from the bottom-right corner

Droppable

Simple

Drag me
Drop here

Accept

Acceptable
Not acceptable
Accept only 'Acceptable'

Prevent Propagation

Drag me
Outer droppable
Inner droppable

Revert draggable position

Will Revert
Not Revert
Drop here (will revert)

Draggable

Default functionality

Drag me around

Constrain movement along an axis

I can only move horizontally
I can only move vertically

Constrain movement within a container

I'm contained

Cursor style

Move cursor
Pointer cursor