There are a million different jQuery plugins out there that do different things with ordering lists, but they’re all more focused on fancy animations and contextual sorting than they are on a simple, friendly, “I want to drag these elements around” sort of thing. They’re just lists, right? It shouldn’t be difficult to write a plugin that’ll just take any old HTML list and make it so that you can drag around the elements and reorder them.
And in fact, it’s not difficult. It’s just tedious and annoying to account for all the edge cases. I finally got sick of writing a version of this for every project that needed one, so here it is wrapped into a reusable plugin.
- jQuery. I develop against jQuery 1.4.4+. It’s been known to work on 3+.
- jQuery UI Draggable. Doesn’t matter how you include it, as long as it’s there. I support jQuery UI 1.8.6+. It’s been known to work on 1.10.×. It’s a bit glitchy on 1.12.x for the moment, as you see on the sample site.
- a list.
<ul>,<ol>, bunch of<div>s in a<div>, in block layout.<dl>s are a bit out there, though, I can’t really deal with those properly.
Usually as simple as $('#my-ul').awesomereorder().
Go here for a couple of demos. It’ll look nicer if you have a modern browser, since all the pretty stuff is in CSS3.
I test on Chrome latest -1, Safari latest -1, Firefox latest -1, and IE 7, 8, 9, and 10. More will come if requested.
Licensed under the WTFPL