I've made some websites for clients where they can add their own products (using PHP and MySQL).  Some of my clients wanted to be able to rearrange the order that the products were shown on a page rather than just list them sorted on title, so I came up with an easy solution that simply listed the products and put little up and down arrows next to each item and the user could click on the arrows to move the items around.  Behind the scenes I have each product set up with an ItemOrder field which I manipulated when the arrows were clicked on.

This works fine when there aren't many products but gets tricky to use when there are more than 20 or so products and  they're moving the item more than a few places because clicking the arrows would cause the page to refresh and the user would have to scroll down to the item and click the arrow again (bit hard to describe but I'm sure you get the picture).

I'd really like to replace this system with a better way of reordering items.  In the past I've found Javascript examples that show how to let the user drag and drop items but the examples would stop there and not show how to signal updates to the database, etc.

Can anyone point me to something, maybe using jQuery, that does what I'm looking for?  Or offer any other insights into how to achieve this in a way that is simple for the user to use?  I'm sure e-commerce packages must offer something like this but I'm not too familiar with any.