This tutorial is going to provide information on an easy way to create drag and drop ordering of data. This can be categories, lists, projects, whatever data you have. In this example we are working with re-arranging files. For this we are going to need to add a field to MySQL, add Dojo to your script, and of course some PHP to manipulate it all.
The Database
First, modify your database table to have an order column. Make the type an int and with a default of null. You must also have an ID or some other unique field that will let you update the fields individually. I will assume you already have one.
ALTER TABLE `file` ADD `order` INT(11) NULL ;
The Javascript
Then we need to add our JavaScript to the <head> of the page. What this is going to do is load Dojo from a CDN and then attach an onDndDrop event to the HTML code that we are going to write. The event will detect an item being dropped and then submit the form without refreshing the page.
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dojo/dojo.js" djConfig="isDebug: true, parseOnLoad: true"></script> <script type="text/javascript"> dojo.require("dojo.parser"); dojo.require("dojo.dnd.Source"); dojo.addOnLoad(function(){ dojo.connect(dragAndDropList,"onDndDrop",function(e){updateList()}); }); function updateList() { var xhrArgs = { form:dojo.byId('dragAndDropForm'), handleAs: "text", preventCache: true } var deferred = dojo.xhrPost(xhrArgs); } </script>
Displaying The Data in Order
You will want to use a query similar to this if you have new data entering your table after your organize the data. This works because the default value of order is NULL and the query creates a temporary alias column called isnull. The temporary isnull column will detect if order is set to null which allows us to order by isnull to separate unorganized items from organized items. We then order by order to arrange all the ordered items.
<?php $sql = "SELECT `name`, `id`, `order`, IF(`order` IS NULL or `order`='', 1, 0) AS `isnull` FROM `file` ORDER BY `isnull` ASC, `order` ASC"; $result = mysql_query($sql); ?>
HTML Code for Drag and Drop and From
There are a few very key elements in this form. The dojoType and class=”dojoDndItem” are required to have Dojo add drag and drop to the page. The data-dojo-id is required to create a global JavaScript variable of the Drag and Drop source. You are not required to use UL and LI but you must have a wrapper and inner elements. You will also notice a hidden input which sends the order of the items discretely to update-order.php.
<form action="update-order.php" method="post" name="dragAndDropForm" id="dragAndDropForm"> <ul dojoType="dojo.dnd.Source" data-dojo-id="dragAndDropList"> <?php while($row = mysql_fetch_assoc($result)){ echo '<li class="dojoDndItem">'; echo '<input type="hidden" name="order[]" value="'.$row['id'].'" />'; echo '<a href="/download.php?id='.$row['id'].'">'.$row['name'].'</a>'; echo '</li>'; } ?> </ul> </form>
Submitting the form to update-order.php
This script gets run every time the user drops an item. The form submits POST values called order[] which PHP interprets as an array. The script then just runs a loop on the array and updates the list. Obviously you are going to want to insure the data incoming is secure and you have connected to the database.
$i = 1; foreach ($_POST['order'] as $id) { mysql_query('UPDATE `file` SET `order`="'.$i.'" WHERE `id`="'.$id.'"'); $i++; }
Styling the Drag and Drop “hover thingy” Avatar:
Lastly- you may want to style the drag and drop actions and avatar without including the Dojo CSS files.
.dojoDndItemSelected, .dojoDndItemAnchor { background:#252525; } .dojoDndItemOver { background:#333; } table.dojoDndAvatar { -moz-border-radius: 0; border: 1px solid #ccc; border-collapse: collapse; background-color: #fff; font-size: 75%; color: black; } .dojoDndAvatar td { border: none; } .dojoDndAvatar tr { border: none; } .dojoDndAvatarHeader td { height: 20px; padding: 0 0 0 21px; } .dojoDndAvatarItem td { padding: 2px; } .dojoDndMove .dojoDndAvatarHeader, .dojoDndCopy .dojoDndAvatarHeader { background-color: #f58383; } .dojoDndMove .dojoDndAvatarCanDrop .dojoDndAvatarHeader, .dojoDndCopy .dojoDndAvatarCanDrop .dojoDndAvatarHeader { background-color: #97e68d; }
Would you be able to put a demo up on your site so we can see it in action? I am trying to implement and it would be helpful to verify that it works on the browser I am using (FireFox).
Hello Chris,
I created a demo for you. I did not hook it up to a database but I did have it output info on the page of what the updates to the database would be.
I noticed a small error in my JavaScript
dojo.addOnLoad(function(){
dojo.connect(dragAndDropList,”onDndDrop”,function(e){updateList()
});
This is incorrect and I apologize. It should be
dojo.addOnLoad(function(){
dojo.connect(dragAndDropList,”onDndDrop”,function(e){updateList()});
});
Notice the “updateList()});” area of the code. The demo is located here: http://www.blaineehrhart.com/demo/dnd-dojo-demo.php
And all the source code for this is here:
http://www.blaineehrhart.com/demo/dnd-dojo-demo.php.src
thanks for post this code…..
Hello, Nice script works great! Two questions, 1) How can the tooltip effect be removed, and what about having more than one list on a page?
Great work! Thanks for giving your time on this demo!
Hey fellow Coder,
To get rid of the tooltip just do somethign like
body .dojoDndAvatar { display:none; }
And then to have more than one drag and drop just duplicate the code and change the name and id on the javascript and html.
dojo.addOnLoad(function(){
dojo.connect(dragAndDropList,”onDndDrop”,function(e){updateList()});
dojo.connect(anotherDragAndDropList,”onDndDrop”,function(e){updateList()});
});
PERFECT!