Drag and Drop Ajax Ordering Using JQuery UI

This post define how to create drag and drop ajax script that order the items and save the ordering result in database.

First of all we will create the database table.








CREATE TABLE IF NOT EXISTS `items` (
  `id` int(12) NOT NULL AUTO_INCREMENT,
  `content` varchar(255) NOT NULL,
  `item_order` int(12) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8;

and we will insert some data to test it.













INSERT INTO `items` (`id`, `content`, `item_order`) VALUES
(1, 'Reality is merely an illusion albeit a very persistent one.', 2),
(2, 'You cannot simultaneously prevent and prepare for war.', 3),
(3, 'I do not believe that civilization will be wiped out in a war fought with the atomic bomb. Perhaps two-thirds of the people of the earth will be killed.', 8),
(4, 'The attempt to combine wisdom and power has only rarely been successful and then only for a short while.', 4),
(5, 'If you are out to describe the truth leave elegance to the tailor.', 5),
(6, 'Anyone who doesn''t take truth seriously in small matters cannot be trusted in large ones either.', 7),
(7, 'I know not with what weapons World War III will be fought but World War IV will be fought with sticks and stones.', 1),
(8, 'It is my conviction that killing under the cloak of war is nothing but an act of murder. ', 9),
(9, 'Politics is for the present but an equation is for eternity.', 10),
(10, 'Pure mathematics is in its way the poetry of logical ideas.', 6);

in the php side we will create the index.php file which contains items to be ordered.























// connect to database
$con = mysql_connect('localhost', 'db_username', 'db_password')or die("cannot connect");
mysql_select_db('db_name')or die("cannot select DB");
// display the items
echo '<div id="sort_items">
<ul>';
$sql = "SELECT * FROM items ORDER BY item_order ASC";
$query = mysql_query($sql);
while ($row = mysql_fetch_array($query)) {
echo '<li id="records_'.$row['id'] .'" title="Drag To Re-Order">'.$row['content'] 


.'</li>';
}
echo '</ul>
</div>';

We should include the JQuery and JQuery UI libs in the index.php in order the script to work.




<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.7.1.custom.min.js"></script>

The JQuery function that is responsible for the drag and ordering :











$(document).ready(function(){
$(function() {
$("#sort_items ul").sortable({ opacity:0.6, update: function() {
var order = $(this).sortable("serialize") + '&action=sort';
$.post("order.php",order);
}
});
});
});

Finally we will recieve the posted data and reordring it with PHP in order.php file.







	
	
	
		
		
		
	





// connect to database
$con = mysql_connect('localhost', 'db_username', 'db_password')or die("cannot connect");
mysql_select_db('db_name')or die("cannot select DB");
// get the posted variables
$action = mysql_real_escape_string($_POST['action'] 

	);
if ($action == "sort"){
	$records = $_POST['records'] 
	
	
		
		
		
	
;
	$counter = 1;
	foreach ($records as $record) {
		$query = "UPDATE items SET item_order='$counter' WHERE id='$record'";
		mysql_query($query);
		$counter = $counter + 1;
	}
}
Demo Download Drag and Drop Ajax Tutorial Files

Leave a Comment

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