Last September I wrote a bespoke e-commerce solution for my wife’s website, including all the accompanying admin screens. One admin screen allows the amendment of the display order of items in a particular category. It was, if I’m honest, a bit clunky, as you had to type in the display order as a number, and then refresh the screen to see what the resultant re-order looked like. In response to repeated requests of “Can’t you make it drag and drop…?” I switched from responding with hollow laughter and actually had a look at how this might be done. And surprisingly, it was pretty straightforward. Here’s how<\/p>\r\n\r\n
I already had a database with a table called items, each of which had a unique ID field and another field called Display_Order. The images for each item are all named in the format [ID]-x.jpg to make life easier.<\/p>\r\n\r\n
I started off just setting up the page to display all the items. Straightforward php, and pretty much what I already had. I’m retrieving the items from the database and displaying them in an unordered list, which I’ll use later for the drag and drop.<\/p>\r\n\r\n
$result = mysql_query("SELECT * FROM items ORDER BY Display_Order ASC");\r\necho "<ul id='categoryorder'>";\r\nwhile ($item = mysql_fetch_array($result))\r\n{\r\necho "<li id='ID_".$item['ID']."'><img src='.$item['ID']."-1.jpg' \r\nheight='90' width='60' alt='No file on server' title='Preview'><\/li>";\r\n}\r\necho "<\/ul>";<\/pre>\r\n\r\nA couple of things to note here – I’ve assigned an id categoryorder<\/code> to my list, and each item in the list has its html id set as “ID_” followed by the database ID. This is important later on, as we’ll see – don’t miss the underscores. Your resultant html should look like this:<\/p>\r\n\r\n<li id=\"ID_1\">...<\/li>\r\n<li id=\"ID_2\">...<\/li>\r\n<\/pre>\r\nThen, I added a bit of css to make my list into two columns of images to match the real page layout.<\/p>\r\n\r\n
Adding the drag and drop<\/h3>\r\n\r\n
I used the jQuery UI sortable plugin<\/a>. You can download jQuery, jQuery UI base and the plugin from http:\/\/jqueryui.com\/download<\/a>. Having done this, I then need to add links to these javascript files in the head of my page<\/p>\r\n\r\n<script type="text\/javascript" src="\/jquery-1.4.2.min.js"><\/script><br>\r\n<script type="text\/javascript" src="\/jquery-ui-1.8.1.custom.min.js"><\/script><\/pre>\r\n\r\nIn order to make my list items draggable then I need to add just the following code:<\/p>\r\n\r\n
<script type="text\/javascript">\r\n$(document).ready(function(){\r\n\r\n $("ul#categoryorder").sortable({ \r\n opacity: 0.6, \r\n cursor: 'move' \r\n });\r\n\r\n});\r\n<\/script><\/pre>\r\n\r\nAll I’m doing is invoking the “sortable” plugin when the page loads and assigning it to items in my #categoryorder<\/code> list. I’m also setting the opacity of the dragged item to be 0.6, so it’s a bit faded when it’s actually being dragged. Finally, I’m setting the cursor to change when I’m dragging an item. And that’s it for the draggable bit – my items can now be dragged and dropped into whatever new order I want.<\/p>\r\n\r\nGiving a visible indication that the order has changed<\/h3>\r\n\r\n
Once I’ve changed the order, it’d be nice to display a message to say that the are changes that haven’t yet been saved, and I can do this by using the update Event on sortable:<\/p>\r\n\r\n
<script type="text\/javascript">\r\n$(document).ready(function(){\r\n\r\n $("ul#categoryorder").sortable({ \r\n opacity: 0.6, \r\n cursor: 'move'<span>, \r\n update: function(){\r\n $('#categorysavemessage').html('Changes not saved');\r\n $('#categorysavemessage').css("color","red");\r\n }<\/span>\r\n });\r\n\r\n});\r\n<\/script><\/pre>\r\n\r\nHere I’m using the update option to populate a predefined message field (#categorysavemessage<\/code>) with some red text to say “Changes not saved” whenever the sort order is changed.<\/p>\r\n\r\nUpdating the database<\/h3>\r\n
I don’t want to update the database every time I move an item, just at the end when I’m happy, so I’ve added a “Save now” button. I now need to create a javascript function to fire when that button is clicked, and here’s the javascript I need:<\/p>\r\n\r\n
function saveDisplayChanges()\r\n{\r\nvar order = $("ul#categoryorder").sortable("serialize");\r\n$('#categorysavemessage').html('Saving changes..');\r\n$.post("update_displayorder.php",order,function(theResponse){\r\n$("#categorysavemessage").html(theResponse);\r\n$('#categorysavemessage').css("color","green");\r\n});\r\n}\r\n<\/script><\/pre>\r\n\r\nHere I’m first populating a variable called order<\/code> with the “new” order of my items, using the “serialize” method of the sortable plugin. This looks at the html id of each list item which refers to the ID in my database, and builds a query string. I’m then passing the resultant string via AJAX to a separate php file called update_displayorder.php which updates the database. Here I’m using the jQuery form of AJAX call. Finally, when I get a message back from the php file I’m updating the message field.<\/p> \r\n\r\nHere’s the php code which will actually update the database:<\/p>\r\n\r\n
$newOrder = $_POST['ID'];\r\n$counter = 1;\r\n\r\n foreach ($newOrder as $recordIDValue) {\r\n $query = "UPDATE items SET Display_Order = " . $counter; \r\n $query .= \"WHERE ID = " . (int)$recordIDValue;\r\n mysql_query($query) or die('Error, insert query failed');\r\n $counter ++;\r\n }\r\n\r\necho 'Changes saved';<\/pre>\r\n\r\nSo here I’m just extracting the data from the post, and then stepping through each item, updating the display order for each one with a variable which I’m incrementing for each item.<\/p>\r\n\r\n
And that’s it – it works, with very little code, thanks to the jQuery UI plugin. Nice. I’ve tested in IE6, IE7, IE8, Chrome, FF3, Opera 9, Opera 10 and Safari 4, all on Win\/XP, and Safari 5 on Mac OS X\/Snow Leopard.<\/p>\r\n\r\n