Drag And Drop Images Reorder Using JQuery, Ajax, PHP & MySQL Example

PHP 8 , PHP

Nicesnippets

5436

28-06-2021


Drag And Drop Images Reorder Using JQuery, Ajax, PHP & MySQL Example

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 :


Recommended Posts