Please Wait...
On Being a Webmaster

On Being a


kristi_blog.png (Lg:302x165)
About Me Visit My Blog

On Being a Webmaster

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. 


First, I sat down and mapped it out on paper, as is my old-school way of thinking it through before starting to code. After I was done I knew that the Javascript coding for such a venture would probably be a bit over my head. Especially since the Top Menu items can have drop-down menus. I wanted the user to be able to drag the main menu item to different positions on the menu, and also drag the child menu items between the main items.


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.

Post a Comment

Your Name:
Your Email:
Your Comment:
Your comment will be posted after approval.


Blog RSS Feed - Subscribe








Webmasters - Connect With Me

 Follow W3Now Web Design on Facebook Connect with Kristi on Linked In   Follow Kristi on Twitter Add Kristi to your Google + Circle


Back to TopAbout Me | Site Map