Drag List

Drag List

With the basic technique of drag and drop, here I developed another demo using drag and drop - drag list. Drag list is to drag the item of the list in order to change the sequence of the list items.

The key ideal is changing the position of the list items during dragging using ondrag callback function and re-postioning the list items when dropping the list item using onstop callback function.

Drag list to change the position of the list items

See the list below, the position of list1 and list2 is changed upside down with a simple CSS. So it is all about manipulating css top values of the list items during dragging.

Let's see a live demo. The importance is the position attribute of list items must be set to either relative or absolute. When dragging a list item, the postion of other list items is changed. This is not event driven but algorithm driven. Set to relative or absolute means different algorithm. In the demos of this page position attribute is all set to relative.

  • List0
  • List1
  • List2
  • List3
  • List4

Drop to re-postioning the list items

Use the DOM method to change the sequence of the list items when drop the dragging item. When target postion is at the end of the list, use appendChild. Or use insertBefore. And reset the top attribute to 0. Here I add a little animation to the changing effect using the script for div move. The dragging item moves to its target position when drop.

  • List0
  • List1
  • List2
  • List3
  • List4

Drag horizontal list

When the list items are floated to left, they are horizontally listed. And you can still drag the list...

  • List0
  • List1
  • List2
  • List3
  • List4

Drag the list with unequal height

You can also drag the list when the height of the list items is not equal.

  • List0
  • List1
  • List2
  • List3
  • List4
Last updated on Apr.24, 2010
www.pagecolumn.com