Drag & Drop with PHP & jQuery

Drag & Drop with PHP & jQuery

Posted on July 24, 2009 by Ashley

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

This entry was posted in Downloads, Javascript, PHP, Tutorials, Web Tools, jQuery, popular and tagged , , , , , , . Bookmark the permalink.
Comments
48 discussions around Drag & Drop with PHP & jQuery
  1. Roy says:

    Nice tutorial/howto, will try it tonight!

    Offtopic: “It‘s quite in here! Why not leave a response?” > quite or quiet?

  2. Ashley says:

    @roy thanks fixed the typo ;)

  3. Marc Falk says:

    Lovely! Just what I needed, thanks…

    Nice blog by the way ;)
    Cheers!

  4. Hey, thanks.. It’s very nice man – but it says “Refresh the page to see the changes”, but when I refresh, nothing happens?

    Thanks for it though :o )

  5. Ashley says:

    @Brian it means refresh the page to see that your changes have been saved in the database and that the list is in the same order that you put them in :)

  6. Felix says:

    Realy usefull!!, thanks for share your code.

  7. @Ashley – ah okay, now I get it.. Thanks :)

  8. Could you do it so you could add more, and delete? Would be so nice!

  9. Pingback: Drag & Drop with PHP & jQuery | Papermashup.com « Netcrema - creme de la social news via digg + delicious + stumpleupon + reddit

  10. Ashley says:

    @Brian I’ll look into doing that when i get some time.

  11. Pingback: Drag & Drop with PHP & jQuery | Papermashup.com

  12. Awesome!

    Cool site btw – just subscribed to your rss !

  13. Peter says:

    Nice post!! Thanks a lot

  14. Pingback: CSS Brigit | Drag & Drop with PHP & jQuery

  15. Pingback: Twitted by UltraMegaTech

  16. Pingback: Drag & Drop with PHP & jQuery | Choose Daily

  17. Sunny Singh says:

    Wish this was built with Mootools though, maybe I can try converting somehow but at least the sql is all there and stuff.

  18. Ashley says:

    @sunny converting this to Mootools shouldn’t be too hard i may even have a crack at it ;)

  19. Pingback: 網站製作學習誌 » [Web] 連結分享

  20. Pingback: LimeSpace – IT » Die Links der Woche – Urlaub im August

  21. Pingback: 10 jQuery code snippets a programmer need daily | PHP tutorials and Scripts Collection

  22. Pingback: 30+ Fresh & Amazing jQuery Plugins & Tutorials

  23. Pingback: 30+ 新鲜惊奇的 jQuery 插件与教程

  24. Alan says:

    muy bueno amigo!!!
    super facil de entender y manipular. Exelente aporte!

  25. Anton says:

    Great work! I have one question. How to create sorting with 2 columns?

  26. Ashley says:

    @Anton exactly the same as with one column, you basically need to duplicate the code but change the id’s and database, thats a dirty way of doing it, if your confident about editing JavaScript you’d need to modify the code to take 2 columns.

  27. Pingback: 30+ JQuery Plugins And Tutorials | oOrch Blog

  28. John S says:

    Hi,
    Beautiful. Any reason why you didn’t have a meta refresh built in? I know that’s what I’d like to do, but don’t know how to do it. The manual refresh kind of breaks the automagic coolness of this.

    Thanks,

    John

  29. Ashley says:

    @john The message in the demo is just to show you that your list order has been added to the database. you don’t need to refresh the page at all, all the requests are done via ajax.

  30. Enatom says:

    Hi,

    Where it says (in updateList.php) :-

    $query = "UPDATE dragdrop SET listorder = " . $count . " WHERE id = " . $idval

    How do I send it another clause, so I can update the order of specific users own posts.

    I want it like this:

    $query = UPDATE dragdrop SET listorder = " . $count . " WHERE id = " . $idval." AND username=".$USERNAME

    im not sure how to pass that extra field (username) to updateList.php through from index.php.

    I hope you can help..
    enatom/com

  31. Ashley says:

    @Enatom in order to post the username variable to the php page you’ll need to replace the following two lines:


    // var username is dummy data
    var username = 'ashley';

    // you can see that i've added the value username to be posted to the php page.
    var order = $(this).sortable("serialize") + '&update=update' + '&username=' + username;

    Let me know if you have any problems. I haven’t tested this but it should work.

    Just an update, I’ve just tested the code, if you view the demo above and use firebug you can see that it posts the username ‘ashley’ to the update php page.

  32. Enatom says:

    @Ashley

    so how would the PHP variable look like when taking in the javascript “username” var.

    I mean how would the SQL query look like in UpdateList.php ?

    i havent dealt with javascript and php interaction like this before.

    thanks

  33. Ashley says:

    @Enatom so once you’ve added the code i wrote earlier, all you need to do is add the following to your updatelist.php file. Note that i’ve added mysql_escape_string(); this makes sure that no one can tamper with the data that is sent to the database.


    // here we save the posted data that was sent using javascript to the PHP variable $username
    $username = mysql_escape_string($_POST['username']);

    Once you add this line to the top of your update list page, you just need to add the queries that you posted originally and it should work fine.

    Let me know if that helps.

  34. Enatom says:

    Just wanted to say thanks, I haven’t tried it yet, but I think it will work.

    For the sake of anyone following this, ill post the results back in about 2 hours time.

    But, I think that this will have a tremendous effect on the Database. If only it had a save button instead of AJAX, anyway. I got the bare bones of how this work, so now since i know how it works, thanks to you.. I could improvise with it.

    Thanks alot for this drag and drop feature.

  35. Ashley says:

    @Enatom No problem, happy to help. Please do post your solution up here. I’d be interested and im sure others will find it useful. Depending on how many users your going to have using this method it could get a little server intensive, it also depends on what server you have.

    Most quality hosts for example the mediatemple grid would be able to cope easily with hundreds if not thousands of simultaneous connections but it does depend on how efficient your code is.

  36. Enatom says:

    Absolutly amazing Ashley, thanks alot for this. It all worked out well. .. it was just a case of adding the extra field for the username clause.

    All in all jQuery syntax is still quite hard to understand with the )}; flying everywhere, but i hope to learn it all.

    Again thanks.

  37. Ajmal says:

    Thanks Ashley.
    I just need it same thing. Good Efforts. Thanks.

  38. Pingback: 30+ 新鲜惊奇的 jQuery 插件与教程 | 芒果

  39. Indialike says:

    Very nice and useful tutorials for web designers,
    Thanks for posting.

  40. When trying to download sample, the zip file says its corrupted.

    thanks,

  41. Ok i figure it out.

    when i downloaded the zip file it kept telling me it was corrupted.

    but when i unzip the file again, it gave me all the files i needed.

    thanks,

    going to tryit.

  42. John says:

    Is there anyway to convert this into multiple tables? For example, I’m trying to make a Team Picker (I’ve got everything working but the DB update). I would like 3 boxes, one for all the members and 2 more boxes for Teams. Using your drag and drop the user could take members from the first box and add them to a team. It would save to the DB and then next time the user comes back to the site she could see her teams she picked. Is this possible with your code?

  43. Den says:

    Hi Ashley! Nice tutorial! Thanks alot! Tell me please can I use it in commercial theme or plugin?

  44. abdu.tursun says:

    thanks!!!

  45. eric says:

    Hey, thanks using this was a snap after hours lost in trying to find a simple and efficient list ordering solution. One question though, how can you possibly get it to work with pagination/paginated data say for instance you are dynamically generating the list from a table with 30 list items and you paginate with 10 per page and you are trying to:
    1. retain the overall order but change the order of the ten items in view (i.e. working on 2nd page with list items 11-20 reorder just that without influencing the rest of the pages){one way – get position of the first list item from db and equate to dollar count, is there a better way? }.
    2. reorder list items across the pages i.e. list item 12 in page 2 to move to list item 3 in page 1{possible solution but unable to work it out: move list item to top/bottom of page and have a link to move it up/down which swaps it with the last/first item on the previous/next page}.

    Any ideas would be greatly appreciated.

  46. MundiSsa says:

    Olá Ashley,

    Excellent tutorial, I would like you to do a few more models of this function. How, drag the box freely and have the option to delete any box if you wish.

    I’m using this tutorial to see her if I can do what you say. If case you prepare a new tutorial or just know where some of the form that said, I would like to be informed.

    Congratulations on your Blog has an excellent range of scripts.

  47. Dior says:

    i want to put a condition for drag, for example if (ID < 5){let it drag}

    just run the action on items that meet the condition.

    Thanks…

  48. vishal says:

    nice tutorial.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Subscribers
1,250
Twitter
510
Comments
1,207
Posts
125