tags:

views:

91

answers:

2
+2  Q: 

jQuery/JavaScript: Reorder Unordered List via Dragging

I have an unordered list <ul> with list items <li> which I'd like to be able to "reorder" via dragging. I'm using jQuery. How could I accomplish this? I tried hooking into the click event but I can't get the drag to work right (I want the other <li> elements to move out of the way once I drag an <li> element over a suitable spot so the user can see where it would end up).

Help?

+2  A: 

If you don't need to invent the wheel:

http://jqueryui.com/demos/sortable

jAndy  2010-07-25 19:06:18
I looked at this but I couldn't find any example on how to make it work with an unordered list...
Alex  2010-07-25 19:08:43
@Alex: that demo infact deals with an unordered list
jAndy  2010-07-25 19:10:26
Looks like the SO new answer notification doesn't work on an iPhone. :). +1
David Hoerster  2010-07-25 19:14:24
@jAndy: lol, now that you changed the link from draggable to sortable :) Didn't know about sortable before. thanks!
Alex  2010-07-25 19:16:38
A: 

Have you considered jQuery UI's droppable/draggable functionality?

Here's a link to a ul demo.

http://jqueryui.com/demos/draggable/#sortable

David Hoerster  2010-07-25 19:11:58

related questions

What JavaScript patterns do you use most?
Javascript events
What style do you use for creating an "class" in JavaScript?
Graphing JavaScript Library
What's the difference in closure style
Getting the text from a drop-down box
How to specify javascript to run when ModalPopupExtender is shown
Length of Javascript Associative Array
How Do I Post and then redirect to an external URL from ASP.Net?
How to set up a CSS switcher in ASP.NET
Wrapping lists into columns
Javascript keyboard events primer? (or rather: help me with my custom dropdown)
Http Auth in a Firefox 3 bookmarklet
Best Debugging Tools for JavaScript/xulrunner Development
How can I turn a string of HTML into a DOM object in a Firefox extension?
Call ASP.NET Function From Javascript?
Javascript troubleshooting tools in IE
MAC addresses in JavaScript
Capturing TAB key in text box
CSS Background Color in Javascript
How can I make the browser see CSS and Javascript changes?
Triple Quotes? How do I delimit a databound Javascript string parameter in ASP.NET?
ASP .Net Custom Client-Side Validation
What JavaScript library would you choose for a new project and why?
Detecting font in JavaScript