jQuery Sortable Lists With Drag Drop Handle
* this post has been extended in the new
Extending the jQuery Sortable With Ajax & MYSQL post
jQuery is damned powerful there’s no doubt about it, but it’s a swine to get started with and the documentation was written by nerds for nerds. The shameful thing is, it doesn’t need to be so hard. I’ve recently made use of a drag / drop style list that will remember the order of the list.
If you use the standard jQuery sortable items, you’ll get the two following problems:
- You won’t be able to click on any items in the sortable list you have
- You’ll probably want an update of the order of the list after every change.
I did find a solution to the problem over at Scott Sauyet’s site, but I needed a little more… The following example will do both, it uses the handle and update options on the .sortable item. By adding these simple items you can produce a pretty advanced sortable list. You could even add AJAX into that update command and automatically update your database with the new values every time you change then removing the need to refresh, and that’s very web 2.0.
Item 1 with a link to Google
Item 2
Item 3
Item 4Perhaps you want to add a form in here?
Text:
And a textarea
25 Comments »