Drag and drop functionality can significantly enhance the usability of web applications. One common use case is enabling users to reorder table rows effortlessly. In this tutorial, we’ll explore how to implement drag and drop functionality for table rows using jQuery.
Why Use Drag & Drop?
The drag-and-drop feature offers several advantages:
- Enhanced Usability: Users can easily rearrange items without needing to use complex buttons or commands.
- Increased Productivity: Streamlines workflow by allowing quick organization of tasks or data.
- Improved User Engagement: A visually appealing and interactive UI keeps users engaged.
Dynamic sorting record with drag and drop list items or div or table rows, it’s amazing things for client or any user to understand flow. If you create sorting with drag and drop able table rows.
Step 1: Create Database Table
CREATE TABLE IF NOT EXISTS `sorting_records` (
`id` int(10) NOT NULL AUTO_INCREMENT,
`title` varchar(120) NOT NULL,
`description` text NOT NULL,
`position_order` int(11) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=7 ;Step 2: Create index.php File
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Drag and Drop Rows In PHP Mysql</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css">
<style type="text/css">
body{
background:#d1d1d2;
}
.mian-section{
padding:20px 60px;
margin-top:100px;
background:#fff;
}
.title{
margin-bottom:50px;
}
.label-success{
position: relative;
top:20px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2 mian-section">
<h3 class="text-center title">Dynamic Drag and Drop Rows In PHP Mysql <label class="label label-success">AllTECHNOSOLUTION</label></h3>
<table class="table table-bordered">
<tr>
<th>Id</th>
<th>Name</th>
<th>Description</th>
</tr>
<tbody class="row_position">
<?php
require('dbConfig.php');
$sql = "SELECT * FROM sorting_records ORDER BY position_order";
$users = mysqli_query($con,$sql);
$j=1;
while($user = $users->fetch_assoc()){
?>
<tr id="<?php echo $user['id'] ?>">
<td><?php echo $j++; ?></td>
<td><?php echo $user['title'] ?></td>
<td><?php echo $user['description'] ?></td>
</tr>
<?php
}
?>
</tbody>
</table>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
<script type="text/javascript">
$(".row_position").sortable({
delay: 150,
stop: function() {
var selectedData = new Array();
$('.row_position>tr').each(function() {
selectedData.push($(this).attr("id"));
});
updateOrder(selectedData);
}
});
function updateOrder(data) {
$.ajax({
url:"ajaxPro.php",
type:'post',
data:{position:data},
success:function(data){
toastr.success('Your Change Successfully Saved.');
//window.location ='index.php';
setTimeout((function() {
window.location.reload();
}), 2000);
}
})
}
</script>
</body>
</html>Step 3: Create Database Configuration File (dbConfig.php)
<?php
$host = "localhost"; /* Host name */
$user = "root"; /* User */
$password = ""; /* Password */
$dbname = "hawkay"; /* Database name */
$con = mysqli_connect($host, $user, $password,$dbname);
// Check connection
if (!$con) {
die("Connection failed: " . mysqli_connect_error());
}Step 4: Create ajaxPro.php File
<?php
// Include Connection File
require('dbConfig.php');
$position = $_POST['position'];
$i=1;
// Update Orting Data
foreach($position as $k=>$v){
$sql = "Update sorting_records SET position_order=".$i." WHERE id=".$v;
mysqli_query($con,$sql);
$i++;
}
?>Enhancing the Experience
You can customize the drag and drop functionality to better suit your application. For instance:
- Styling: Apply CSS to improve visual feedback during dragging.
- Update Backend: Use AJAX to update the server with the new row order.
- Event Handling: Implement logic inside the
updatefunction to handle row reorder.
