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.
- list 1 - top: 26px
- list 2 - top: -26px
- list 3
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
