This section contains the detail about the jQuery Drag 'n Drop which also Record Sequence in Database using PHP
jQuery Drag 'n Drop: Record Sequence in Database using PHP
In this section, you will learn how to use drag and drop feature of jQuery to reorganize a list and store the sequence in a database.
For storing sequence of each message in the database, we have incorporated the php script. When ever a drag and drop event occurs, it updates the sequence in the database of that dragged message. And it shows you the reorganize message sequence according to snuffling by you.
Given below example will give you a clear idea :
Example :
ChangeDragNDrop.php
<?php
//Connect to the database
$connection = mysql_connect('192.168.10.13', 'root' , 'root') or die(mysql_error());;
$selection = mysql_select_db('commentdb', $connection);
?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Dynamic Drag'n Drop</title>
<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.1.custom.min.js"></script>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
margin-top: 10px;
}
ul {
margin: 0;
}
#contentWrap {
width: 700px;
margin: 0 auto;
height: auto;
overflow: hidden;
}
#contentTop {
width: 600px;
padding: 10px;
margin-left: 30px;
}
#contentLeft {
float: left;
width: 400px;
}
#contentLeft li {
list-style: none;
margin: 0 0 4px 0;
padding: 10px;
background-color:#ADD8E6;
border: #CCCCCC solid 1px;
color:#4B0082;
}
#contentRight {
float: right;
width: 260px;
padding:10px;
background-color:#C0C0C0;
color:#4B0082;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$(function() {
$("#contentLeft ul").sortable({ opacity: 0.6, cursor: 'move', update: function() {
var order = $(this).sortable("serialize") + '&action=updateRecordsListings';
$.post("UpdateTable.php", order, function(theResponse){
$("#contentRight").html(theResponse);
});
}
});
});
});
</script>
</head>
<body>
<div id="contentWrap">
<div id="contentTop">
<p><b>Drag and Drop the below message down to put the order according to you.According to new
order set by you , it will also update sequence attrbute in the database.
</b><img src="images/arrowdownGreen.png" alt="Arrow Down" width="22" height="22" /></p>
</div>
<div id="contentLeft">
<ul>
<?php
$query = "SELECT * FROM messages ORDER BY sequence ASC";
$result = mysql_query($query);
while($row = mysql_fetch_array($result))
{
?>
<li id="recordsArray_<?php echo $row['Id']; ?>">
<?php echo $row['Id'] . ". " . $row['Message'];?></li>
<?php } ?>
</ul>
</div>
<div id="contentRight">
<p>Sequence Of Array will be show here...</p>
<p> </p>
</div>
</div>
</body>
</html>
UpdateTable.php
<?php
//Connect to the database
$connection = mysql_connect('192.168.10.13', 'root' , 'root') or die(mysql_error());;
$selection = mysql_select_db('commentdb', $connection);
$action = mysql_real_escape_string($_POST['action']);
$updateRecordsArray = $_POST['recordsArray'];
if ($action == "updateRecordsListings"){
$listingCounter = 1;
foreach ($updateRecordsArray as $recordIDValue) {
$query = "UPDATE messages SET sequence = ".$listingCounter."WHERE Id=".$recordIDValue;
mysql_query($query) or die('Error, insert query failed');
$listingCounter = $listingCounter + 1;
}
echo '<pre>';
print_r($updateRecordsArray);
echo '</pre>';
echo 'Refreshing does not effect the modified sequence.';
}
?>
Output :
At first, you will see the following :
When i drag first message at third place you will see following :
[ 0 ] Comments