Since you are new to things, so i would suggest you a very simple and easy way to handle this.
Jquery sortable is the best answer to your question.
http://jqueryui.com/sortable/
Here is an example code that i have tested and it works great. I am giving you code for two files
1 This is index.php
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sorting Items on the fly using jQuery UI, PHP & MySQL</title>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.10.1.custom.min.js"></script>
<script>
$(document).ready(
function() {
$("#sortme").sortable({
update : function () {
serial = $('#sortme').sortable('serialize');
$.ajax({
url: "sort_menu.php",
type: "post",
data: serial,
error: function(){
alert("theres an error with AJAX");
}
});
}
});
}
);
</script>
</head>
<body>
<h1>Menu List</h1>
<style>
#sortme li{
margin: 0 3px 3px 3px;
padding: 0.4em;
padding-left: 1.5em;
font-size: 1.4em;
height: 18px;
list-style: none;
background: bisque;
width: 150px;
}
</style>
<ul id="sortme">
<?php
// Connecting to Database
mysql_connect('localhost', 'root', '') or die ('Cant Connect to MySQL');
// Selecting Database
mysql_select_db('sorting') or die ('Cant select Database');
// Getting menu items from DB
$result = mysql_query("SELECT * FROM `menu` ORDER BY `sort` ASC") or die(mysql_error());
while($row = mysql_fetch_array($result)) {
echo '<li id="menu_' . $row['id'] . '">' . $row['title'] . "</li>
";
}
?>
</ul>
</body>
</html>
2 sort_menu.php
<?php
// Connecting to Database
mysql_connect('localhost', 'root', '') or die ('Cant Connect to MySQL');
// Selecting Database
mysql_select_db('sorting') or die ('Cant select Database');
$menu = $_POST['menu'];
for ($i = 0; $i < count($menu); $i++) {
mysql_query("UPDATE `menu` SET `sort`=" . $i . " WHERE `id`='" . $menu[$i] . "'") or die(mysql_error());
}
?>
Note:
1 Get the jquery UI and jquery from live server
2 Make sure you have a database having a column "menu" with three fields; id, title and sort.
Enjoy :)
