Jun 28, 2021
.
Admin
Hi guys,
Today i will explained how to Drag And Drop Images Reorder Using JQuery, Ajax, PHP & MySQL Example. This example is so easy to use in php. THis example to i am Drag And Drop Images Reorder and reorder to the image position using JQuery, Ajax, PHP & MySQL.
This example to i am use Three php files and few dummy images to add in database and images folder in your local system.
So let's start to the example.
DB.class.php
<?php
class DB{
// Database configuration
private $dbHost = "localhost";
private $dbUsername = "root";
private $dbPassword = "root";
private $dbName = "login";
private $imgTbl = 'images';
function __construct(){
if(!isset($this->db)){
// Connect to the database
$conn = new mysqli($this->dbHost, $this->dbUsername, $this->dbPassword, $this->dbName);
if($conn->connect_error){
die("Failed to connect with MySQL: " . $conn->connect_error);
}else{
$this->db = $conn;
}
}
}
/*
* Get rows from images table
*/
function getRows(){
$query = $this->db->query("SELECT * FROM ".$this->imgTbl." ORDER BY img_order ASC");
if($query->num_rows > 0){
while($row = $query->fetch_assoc()){
$result[] = $row;
}
}else{
$result = FALSE;
}
return $result;
}
/*
* Update image order
*/
function updateOrder($id_array){
$count = 1;
foreach ($id_array as $id){
$update = $this->db->query("UPDATE ".$this->imgTbl." SET img_order = $count, modified = NOW() WHERE id = $id");
$count ++;
}
return TRUE;
}
}
?>
orderUpdate.php
<?php
// Include and create instance of DB class
require_once 'DB.class.php';
$db = new DB();
// Get images id and generate ids array
$idArray = explode(",", $_POST['ids']);
// Update images order
$db->updateOrder($idArray);
?>
index.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="container">
<a href="javascript:void(0);" class="reorder_link" id="saveReorder">reorder photos</a>
<div id="reorderHelper" class="light_box" style="display:none;">1. Drag photos to reorder.<br>2. Click 'Save Reordering' when finished.</div>
<div class="gallery">
<ul class="reorder_ul reorder-photos-list">
<?php
// Include and create instance of DB class
require_once 'DB.class.php';
$db = new DB();
// Fetch all images from database
$images = $db->getRows();
if(!empty($images)){
foreach($images as $row){
?>
<li id="image_li_<?php echo $row['id']; ?>" class="ui-sortable-handle">
<a href="javascript:void(0);" style="float:none;" class="image_link">
<img src="images/<?php echo $row['file_name']; ?>" alt="">
</a>
</li>
<?php } } ?>
</ul>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('.reorder_link').on('click',function(){
$("ul.reorder-photos-list").sortable({ tolerance: 'pointer' });
$('.reorder_link').html('save reordering');
$('.reorder_link').attr("id","saveReorder");
$('#reorderHelper').slideDown('slow');
$('.image_link').attr("href","javascript:void(0);");
$('.image_link').css("cursor","move");
$("#saveReorder").click(function( e ){
if( !$("#saveReorder i").length ){
$("ul.reorder-photos-list").sortable('destroy');
$("#reorderHelper").html("Reordering Photos - This could take a moment. Please don't navigate away from this page.").removeClass('light_box').addClass('notice notice_error');
var h = [];
$("ul.reorder-photos-list li").each(function() {
h.push($(this).attr('id').substr(9));
});
$.ajax({
type: "POST",
url: "orderUpdate.php",
data: {ids: " " + h + ""},
success: function(){
window.location.reload();
}
});
return false;
}
e.preventDefault();
});
});
});
</script>
</body>
</html>
style.css
.container{
margin-top:50px;
padding: 10px;
}
ul, ol, li {
margin: 0;
padding: 0;
list-style: none;
}
.reorder_link {
color: #3675B4;
border: solid 2px #3675B4;
border-radius: 3px;
text-transform: uppercase;
background: #fff;
font-size: 18px;
padding: 10px 20px;
margin: 15px 15px 15px 0px;
font-weight: bold;
text-decoration: none;
transition: all 0.35s;
-moz-transition: all 0.35s;
-webkit-transition: all 0.35s;
-o-transition: all 0.35s;
white-space: nowrap;
}
.reorder_link:hover {
color: #fff;
border: solid 2px #3675B4;
background: #3675B4;
box-shadow: none;
}
#reorder-helper{
margin: 18px 10px;
padding: 10px;
}
.light_box {
background: #efefef;
padding: 20px;
margin: 15px 0;
text-align: center;
font-size: 1.2em;
}
/* image gallery */
.gallery{
width:100%;
float:left;
margin-top:15px;
}
.gallery ul{
margin:0;
padding:0;
list-style-type:none;
}
.gallery ul li{
padding:7px;
border:2px solid #ccc;
float:left;
margin:10px 7px;
background:none;
width:auto;
height:auto;
}
.gallery img{
width:250px;
}
/* notice box */
.notice, .notice a{
color: #fff !important;
}
.notice {
z-index: 8888;
padding: 10px;
margin-top: 20px;
}
.notice a {
font-weight: bold;
}
.notice_error {
background: #E46360;
}
.notice_success {
background: #657E3F;
}
Now you can check your own.
I hope it can help you...
Database :
Output :
#PHP 8
#PHP
