Interactions

Home / Interactions

Sortable

Default Grid

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 Grid

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 Accept Prevent Propagation Revert Draggable

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 Axis Restricted Container Restricted Cursor Style

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