One of my favorite features of a content management system is a drag to sort list. Something similar can be seen in systems like the widgets module in WordPress.

Before I realized it was there, a few clients have asked me to integrate these lists so they can better manage items for their website.

This is a relatively new dynamic web application feature that some sites may be using. I will show you how to implement one of these using simple techniques and tools.

First you will need a Javascript Library called Scriptaculous. Download it and add to a directory where your main PHP files for this app will be.

You will need access to a database. I use MySQL, but if you are experienced with others, you may be able to adjust the codes accordingly.

The first PHP file you will create is a class file. In it you will add a database connection function and a main query function. You will also need to create 6 other core functions to run the application.

Here is an example class file you can use. This can be changed accordingly to match your db settings. You will also need to create a database table with 4 fields. These are id, title, link and sort order.

Here’s a pic for reference.

Now that you have the basic core files setup, it’s time to do some interface scripting.

The next set of files you will create will be what the admin will see. These will be 5 files, one to display the main list, one to add new items, another to delete items, one to edit an item and finally a file to sort the items. Now I can’t just say go create…I have to give you some kind of reference.

Grab the files here.

Implement and start testing. You should be able to sort, reload and see your changes in effect. Because whatever you see in the admin, that’s the order it will be displayed on the front.

You will also have an ability to add, edit or delete a record. You can sort up or down. But beware, I’ve had problems when I displayed the list inline. The sort function still works but in an awkward way and not as smoothly.

Once you are satisfied that the application does what it needs to on the backend. You can now go ahead and display the list on the front. Style however you want. Changes are seen when you load the page and not live while looking at the page. So it won’t freak your visitors out, because they don’t see anything moving around while browsing. Here is an example file.

Let me know if you enjoyed this tutorial. And if and how you use this sweet little app.

Note: by the way you have to change the extension of the example files to php.

How to Create a Draggable Sort List is a post from: WebDevStar.com | © WebDevStar.com