jQuery: Customizable layout using drag and drop (examples)

Examples for the article jQuery: Customizable layout using drag and drop by DevHeart.

Next »
 

Example 1.1: A single sortable list

Drag and drop items within a list.
  • Sortable item A
  • Sortable item B
  • Sortable item C

Example 1.2: Sortable and connectable lists

Drag and drop items within and between lists.
  • Sortable item A
  • Sortable item B
  • Sortable item C
  • Sortable item D
  • Sortable item E
 

Example 1.3: Sortable and connectable lists with visual helper

Drag and drop items within and between lists. A visual helper is displayed indicating where the item will be positioned if dropped.
  • Sortable item A
  • Sortable item B
  • Sortable item C
  • Sortable item D
  • Sortable item E
 

Example 1.4: Sortable and connectable lists (within containment)

Drag and drop items within and between lists. Drag constrained to the bounds of the yellow containment.
  • Sortable item A
  • Sortable item B
  • Sortable item C
  • Sortable item D
  • Sortable item E