Use your left/right keys to browse tutorials
Drag & Drop with PHP & jQuery

Drag & Drop with PHP & jQuery

1 Star2 Stars3 Stars4 Stars5 Stars
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(){
  $("#response").slideUp("slow", function () {
      });

}, 2000);}

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

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

});

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

  1. 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.
  2. 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.
  3. 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.

  <div id="list">

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

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

				?>
      <li id="arrayorder_<?php echo $id;?>"><?php echo $id;?> <?php echo $text;?>
        <div class="clear"></div>
      </li>
      <?php } ?>
    </ul>
  </div>

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.

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

demodownload



More tutorials from Papermashup
  • Felipe Furlan

    Excellent ! Simply and Work, thanks !

  • http://www.designm3.com Mike McMonagle

    Ashley – Can I suggest you create a small oval shape onscreen, then, with the font of your choice, type “benign genius” and press PRINT. Using a sharp pair of scissors (no running) carefully cut around the oval neatly, then, using double-sided tape apply it to your t-shirt or perhaps a favourite baseball cap.

    I just tried and amended this code to make an adjustable gallery upload and display within a bespoke CMS system for a client and she now thinks I am quite the most wonderful chap.

  • http://inam101.wordpress.com inam101

    Hello, it was a nice tutorial and a very useful control.

    I have a problem, whenever I click on a link inside the tab-body, it closes/hides the tab body instead of going to the desired destination page.

    Please help me with this.
    Thanks

  • http://www.prodigemedia.com Jeff

    Hi,
    Great script!
    Maybe someone may help me, I am looking for a way to use drag and drop over a grid with different shapes library.
    Rectangles, squares of differents size picked up froma library and clipping together side by side over a grid.

    Anyone know how ?

  • gabstafari

    just update the jquery ui and jquery to the latest version and it will work on all browsers.

    enjoy

    • http://www.graycelltech.com Varinder

      Wow !!!

      Thanks Now Its working on all browsers .

  • http://www.graycelltech.com Varinder

    Great work !!!
    Please share If you have any solution for IE9?

    • Ko

      Yes, please…!!!!

  • John

    This doesn’t work in IE9 ?

  • Dion

    Hi,

    I love this tutorial, but i keep getting this error:

    Warning: mysql_query() [function.mysql-query]: Access denied for user ‘dionjo’@'localhost’ (using password: NO) in /admin/updateList.php on line 10

    Warning: mysql_query() [function.mysql-query]: A link to the server could not be established in /admin/updateList.php on line 10
    Error, insert query failed

    how can i fix this?

    • http://websyntax.blogspot.com falconerie

      you need it to edit the connect.php if you’re working on localhost, remove the password and change the user to ‘root’, change the database name.there you have it,