Drag & drop

Variants of the drag-and-drop scenario, each on its own isolated page.

• Vertical (baseline)

  Top-to-bottom row layout. Drag items to reorder.

  • drag
  • sortable
  • mouse
  • vertical

• Horizontal

  Left-to-right column layout. Same items, sideways axis.

  • drag
  • sortable
  • mouse
  • horizontal

• Grid Layout (2D)

  Items arranged in a 2D grid. Drag diagonally/freely to reorder.

  • drag
  • sortable
  • mouse
  • grid
  • 2d

• Grab Handle

  Vertical layout where items can only be dragged using a specific handle.

  • drag
  • sortable
  • mouse
  • handle

• List Transfer (Kanban)

  Drag items from 'Available' list into 'Your Cart' list to match target selection.

  • drag
  • sortable
  • mouse
  • transfer
  • multilist