I think, therefore I blog

Javascript Drag-and-Drop Ordered Lists

By , 1 September 2004

Javascript Drag-and-Drop Ordered Lists

Yet another "couldn't already find this web thing on the Internet" discovery. Using a modified version of Youngpup's DOM-Drag, I created a list that you can reorder in the DOM by dragging and dropping elements around:

drag and drop

  • Foo
  • Bar
  • Baz
  • Quux

The really nice thing about doing it in the DOM, rather than just moving the positions around, is that you can then create a form which encodes the new order, by inspecting the elements of the list at submit time. I'll be using this to provide an editable playlist for Songbee. The next step is, of course, to be able to drag new songs onto the playlist from a separate list of available songs.

Javascript Drag-and-Drop Ordered Lists

About Roger Keays

Javascript Drag-and-Drop Ordered Lists

Roger Keays is an artist, an engineer, and a student of life. Since he left Australia in 2009, he has been living as a digital nomad in over 40 different countries around the world. Roger is addicted to surfing. His other interests are music, psychology, languages, and finding good food. Click here to subscribe to his weekly blog, or stalk him on Facebook and Twitter.

You May Also Like

Leave a Comment

Please visit https://RogerKeays.com/javascript-drag-and-drop-ordered-lists to add your comments.

Join Over 1000 Subscribers

I write every Sunday about travel, psychology, and technology. Thousands of people just like you have already subscribed—and for good reason. It'll change your life. And it's free :)

Read a Good Book

“A spellbinding true story of love, passion and adventure. One can’t help but be swept away by 100% Love Guaranteed.” —Dr Tammie Matson, author of Elephant Dance.

Chat For A While

Your Vote Matters

Which animal will take over when humans go extinct?