Use your left/right keys to browse tutorials

Drag & Drop with PHP & jQuery

Posted on July 24, 2009

The ability to drag and drop content on a page and have it save the order can make for a great user interface and is actually relatively easy to execute with a few lines of jQuery. You’ll need to include the jQuery user interface library which you can find here: Jquery Google API. All the files needed to get this up and running are in the download at the bottom of this post.

In this tutorial we’re going to be looking at 2 main PHP pages. the index.php page which contains the contents and functionality to perform the drag and drop and the updateList.php file which is a simple piece of code to update the listOrder column in the database using PHP and MySQL. Additionally you will need to add your database details to the connect.php file in the download package.

The Code

$(document).ready(function(){
	  function slideout(){
  setTimeout(function(){
  $(&quot;#response&quot;).slideUp(&quot;slow&quot;, function () {
      });

}, 2000);}

    $(&quot;#response&quot;).hide();
	$(function() {
	$(&quot;#list ul&quot;).sortable({ opacity: 0.8, cursor: 'move', update: function() {

			var order = $(this).sortable(&quot;serialize&quot;) + '&amp;update=update';
			$.post(&quot;updateList.php&quot;, order, function(theResponse){
				$(&quot;#response&quot;).html(theResponse);
				$(&quot;#response&quot;).slideDown('slow');
				slideout();
			});
		}
		});
	});

});

Here’s a summary of whats going on in the code above.

To start with we have a simple function that will slide up the ‘response’ div which contains the message once the data is saved in the database.
We then move to the section that enables us to drag and drop the boxes. we then set the variable ‘order’ which contains the data to be posted via ajax to our database update script.
Once the ajax request has been executed we then display the response in the div #response

This is the section in the index.php page that retrieves the results from the database in the correct order.

  &lt;div id=&quot;list&quot;&gt;

    &lt;div id=&quot;response&quot;&gt; &lt;/div&gt;
    &lt;ul&gt;
      &lt;?php
                include(&quot;connect.php&quot;);
				$query  = &quot;SELECT id, text FROM dragdrop ORDER BY listorder ASC&quot;;
				$result = mysql_query($query);
				while($row = mysql_fetch_array($result, MYSQL_ASSOC))
				{

				$id = stripslashes($row['id']);
				$text = stripslashes($row['text']);

				?&gt;
      &lt;li id=&quot;arrayorder_&lt;?php echo $id;?&gt;&quot;&gt;&lt;?php echo $id;?&gt; &lt;?php echo $text;?&gt;
        &lt;div class=&quot;clear&quot;&gt;&lt;/div&gt;
      &lt;/li&gt;
      &lt;?php } ?&gt;
    &lt;/ul&gt;
  &lt;/div&gt;

Below is the code from the ‘updateList.php’ file. Its pretty self explanatory, we have a MySQL update script wrapped with a foreach loop which adds the list order number in the database and echo’s the response.

&lt;?php
include(&quot;connect.php&quot;);
$array	= $_POST['arrayorder'];
if ($_POST['update'] == &quot;update&quot;){
$count = 1;
	foreach ($array as $idval) {
		$query = &quot;UPDATE dragdrop SET listorder = &quot; . $count . &quot; WHERE id = &quot; . $idval;
		mysql_query($query) or die('Error, insert query failed');
		$count ++;
	}
	echo 'All saved! refresh the page to see the changes';
}
?&gt;