Click an button to reveal the serialized version of the associated list.
In Firefox you can also drag the bullet to move an item. Keen.
Saving the reorderd list is possible by inspecting the DOM. All the sortable lists on this page retain their order via cookies (try rearranging a list and then reloading the page). Read a description of the technique on my blog.
Firefox exhibits a quirky bug on this example. If the list items have a bottom margin, all following content pops down a few pixels when you start dragging the item. No such problem when the item has a top margin so a workaround is possible.
I added some styling and cursor hinting in an attempt to make the dragability more obvious (see in-place editing for an example with drag handles).
|
|
|
no margin on list items | 4px bottom margin on list items. Firefox exhibits bug when dragging. | Firefox workaround: -4px top margin on list, 4px top margin on list items. |
This next list is intentionally long to see how well the technique scales up and uncover other interaction issues.
You'll notice if part of this list is below the fold, it requires at least 2 drags to move an item from the beginning to the end (technically 3 drags if you count the one on your browser's scrollbar). Automatic scrolling, like in Word or Excel, is a well established solution to this problem. Adding that is a work in progress.
Yet another bizarre bug in firefox. The short version:
use a DIV instead of a BR to clear the float: left
else things won’t remain as you expect them once you start
dragging.
With sorting vertically oriented items under our belt, onto the next challenge: sorting floated, wrapped list items. Earlier versions of my code had separate scripts for vertical, horizontal, and wrapped lists. Now they are unified into one script that does it all. Amazing!
A previous version determined when to swap based on the position of the top-left corner of the item being dragged. It was this example and the slide arranger example which illustrated that the better interaction is to base this on the position of the cursor, which is how the script works now.
Firefox and Safari still generate a 'click' event even after performing a drag. This can be overcome with more JavaScript.
IE isn't rendering the link elements with display: block
.
So only the link text is clickable.
Sortable items containing links. Links are 'display: block' so the entire item is clickable (except this isn't so in IE). As buttons go these aren't very good; they lack button affordances and behavior. But I think you get the general idea.