The ability to drag and drop content on a page and have it save the order can make for a cool & interactive user interface and is actually relatively easy to execute with a few lines of jQuery.
In this tutorial, We have two main pages, the index.php page which contains the contents and functionality to perform the drag and drop and the sort_order.php file which is a simple piece of code to update the sort column in the database using PHP and MySQL.
1. Create a new MySQL Database called `jquery_example` and a new table called sortItem.
CREATE TABLE IF NOT EXISTS 'sortItem' (
'id' int(11) NOT NULL auto_increment,
'title' varchar(255) NOT NULL,
'sort' int(2) NOT NULL,
PRIMARY KEY ('id')
)
2. Create new php file called “sort_order.php”, this file will be our main file to sort the unordered items .
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="js/jquery-1.4.2.min.js"></script>
<script src="js/jquery-ui-1.8.1.custom.min.js"></script>
<meta charset=utf-8 />
<title>drag'n drop & saving the new positions to the database - With jQuery And PHP</title>
<style>
#reorder-item {width:350px; padding:20px; border:1px solid #eee;}
#order-buttons {background-color:#eee; padding:10px;}
#sortable { list-style-type: none; margin: 0; padding: 0; }
#sortable li { margin: 3px 3px 3px 0; padding: 1px; float: left; width: 50px; height: 50px; font-size: 2em; text-align: center; }
#sortable li div {padding:1px; border:1px solid #ccc; cursor: pointer; width:40px; height:40px;}
.ui-state-default, .ui-widget-content .ui-state-default{border:none; background:none;}
.clear {clear:both;}
</style>
</head>
<body>
<div id="reorder-item">
<ul id="sortable">
<?php
// Connecting to Database
mysql_connect("localhost", "root", "") or die ('Unable to Connect MySQL');
// Selecting Database
mysql_select_db("jquery_example") or die ('Unable to select Database');
// Getting items from DB
$result = mysql_query("SELECT * FROM sortItem ORDER BY sort ASC") or die(mysql_error());
while($row = mysql_fetch_array($result)) {?>
<li id="item_<?=$row['id']?>"><div><?=$row['title']?></div></li>
<?}?>
</ul>
<div></div>
<br /><br />
<div id="order-buttons">
<button id="btnshoworder" name="btnshoworder">Show Order</button>
</div>
</div>
<script language="JavaScript">
$(document).ready(
function() {
$("#sortable").sortable({
update : function () {
serial = $('#sortable').sortable('serialize');
$.ajax({
url: "sort_order.php",
type: "post",
data: serial,
error: function(){
alert("theres an error with AJAX");
}
});
}
});
}
);
</script>
</body>
</html>
3. This is the code from the ‘sort_order.php’ file. Its pretty self explanatory, we have a MySQL update script wrapped with a for loop which updates the list order number in the database.
<?php
// Connecting to Database
mysql_connect("localhost", "root", "") or die ('Unable to connect MySQL');
// Selecting Database
mysql_select_db("jquery_example") or die ('Unable to select Database');
$item = $_POST['item'];
for ($i = 0; $i < count($item); $i++) {
mysql_query("UPDATE sortItem SET sort=" . $i . " WHERE id ='" . $item[$i] . "'") or die(mysql_error());
}
?>
Finally, this should works fine with you, but If you faced any problem, Please leave your comment !
No comments:
Post a Comment