jQuery Script for Drag and Drop Sorting of Elements
My company (W3Now) offers a Website Manager, where users can create and update their own websites. I programmed this product and still continue to update it almost daily.
It was brought to my attention that the function to add a page to the Top Menu was bit cumbersome, and so I decided to write a drag-and-drop script to allow the user to place pages on their menu in a very WYSIWYG way.
Then it occurred to me that there surely must be an existing jQuery script to do such a thing. So after a few Google searches, I found just what I was looking for: a jQuery UI script called Sortable.
I am impressed by this script. It has several options which are useful for many different applications, including dragging and dropping photo album photos to make the photo album photos show in the order you want. But that's another story.
Now my remaining challenges are to code my new "menu manager" (using server-side code) to start with the user's current menu items, shown in their current positions. After the user drags the menu elements to where they want them to be, they can click SAVE. At that point I will have to use further jQuery to determine the final screen positions of all the main and child menu elements. Once I have these, I can use Ajax to translate the new positions into my database which already tells the system how to display the Top Menu and its drop-downs.
I'm still coding this and it is coming along nicely...
Kristi Dittmann is Webmaster at W3Now Web Design
Please contact us for a free quote on your next web development project.