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
Comments
81 discussions around Drag & Drop with PHP & jQuery
Older Comments
  1. 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.

  2. inam101 says:

    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

  3. Jeff says:

    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 ?

  4. gabstafari says:

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

    enjoy

  5. Varinder says:

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

  6. John says:

    This doesn’t work in IE9 ?

  7. Dion says:

    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?

    • falconerie says:

      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,

Older Comments




Never miss an update from Papermashup

Get notified about the latest tutorials and downloads.

Subscribe by Email

Get alerts directly into your inbox after each post and stay updated.
Subscribe
OR

Subscribe by RSS

Add our RSS to your feedreader to get regular updates from us.
Subscribe

Get in contact

Please use the form below to get in contact. If your question is related to a free script download, please use the comments on the article page as community members are more likely to respond quicker than I can personally.

About Me

I'm Ashley Ford, Co-founder and Technical Director at Harkable.com London, UK. Previously I worked at InMobi, Spotify and MySpace. My interests include photography and making short videos I'm also an avid F1 fan. I'm always working on side projects. Here are a few: Easy Poll, We Deliver.



What do you specialise in?

I spend a lot of time coding in PHP and MySQL, as well as front end XHTML and CSS. I also specialise in javascript and the jQuery framework as well as being an avid designer. You can find me on dribbble

Interested in advertising?

If you'd like to advertise on Papermashup.com please get in touch via the contact link below for advertising opportunities.

How do I contact you

You can contact me here. and I'm available for consultation, freelance, programming book reviews.

Get on the mailing list

Join over 3000 people who have subscribed to the Papermashup inbox message, and be the first to find out about tutorial, competitions and giveaways.