snarore Drag and Drop Reorder Images using Query, Ajax, PHP & MySQL - CodexWorld Home (https://www.codexworld.com) » PHP (https://www.codexworld.com/tutorials/php/) » Drag and Drop Reorder Images using jQuery, Ajax, PHP & MySQL Drag and Drop Reorder Images using jQuery, Ajax, PHP & MySQL By: CodexWorld | In: PHP (https://www.codexworld.com/tutorials/php/) | Last Updated: Mar 8, 2018 Drag and Drop Reorder Images using jQuery, Ajax, PHP & MySQL Drag and Drop feature makes web page user-friendly and provides a nice user interface for the web application. jQuery UI provides an easy way to add draggable functionality on DOM element. This tutorial shows you the uses of jQuery drag and drop feature to sort the list elements. If we want to control the display order of images in the list dynamically, image order needs to be stored in the database. In this tutorial, we'll provide a more interactive way to implement the images reorder functionality, Here we'll demonstrate how to add jQuery drag and drop feature to rearrange images order and save images display order in the database using PHP and MySQL. The Drag and Drop Reorder functionality are very useful for managing images gallery, users list, and other dynamic content lists. The example code helps to implement dynamic drag and drop reorder images using jQuery, Ajax, PHP, and MySQL. This sample code also can be used to implement the drag and drop reorder list, rows or sorting elements. hitps:luwn-codexworld.comidrag-drop-mages-reorder-sing-jquery-slax-ahp-mysqU wasiroo18 Drag and Drop Reorder Images using {Query Ajax, PHP & MySQL. - Codexold Before getting started, take a look at the folder and files structure to build drag and drop reorder images functionality using jQuery, Ajax, PHP, and MySQL. DB.class.php orderUpdate.php index. php style.css images/ Create Database Table To store images and their display order, a table needs to be created in the database. The following SQL creates a images table with some basic required fields in the MySQL database. CREATE TABLE “images” ( “id? int(24) NOT NULL AUTO_INCREMENT, file_name” varchar(1@0) COLLATE utf8_unicode_ci NOT NULL, img_order” int(S) NOT NULL DEFAULT ‘0", created’ datetime NOT NULL, “modified” datetime NOT NULL, status’ enum('1',*@") COLLATE utf8_unicode_ci NOT NULL DEFAULT '1', PRIMARY KEY (“id”) ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci; DB Class (DB.class.php) The DB class controls all the database related works, like get records, update record, etc. Specify the database host ( $dbHost ), username ( $dbUsernane ), password ( $dbPassword ), and name ( $dbNane ) as per your MySQL database credentials. The DB class contains two methods to fetch and update images data * getRows() function fetch the images data from the database. * updateorder() function updates list order of the images. hitps:luw-codexworld.comidrag-drop-mages-reorder-sing-jquery-asnarore Drag and Drop Reorder Images using Query, Ajax, PHP & MySQL - CodexWorld db) ){ // Connect to the database $conn = new mysqli($this-sdbHost, $this->dbUsername, $this->doPassword, $t his->dbName) ; if ($conn->connect_error){ die(“Failed to connect with MySQL: Jelset Sthis->db = $conn; + $conn->connect_error); } + + I * Get rows from images table */ function getRows(){ Squery = $this->db->query("SELECT * FROM “.$this->imgTbl." ORDER BY img _orde PASC"); if(Squery->num_rows > @){ while($row = $query->fetch_assoc()){ Sresult[] = $row; + jelse{ $result = FALSE; ? return $result; I * Update image order */ function updateOrder($id_array){ $count = 1; foreach ($id_array as $id){ $update = $this->db->query("UPDATE ".$this->imgTbl." SET img_order = $coun t WHERE id = $id"); $count ++; + return TRUE; hitps:luwu.codexworld.comidrag-drop-mages-reorderusing-jquery 2-shp-mysqlsnarote Drag and Drop Reorder Images using Query, Ajax, PHP & MySQL - CodexWorld } 2 Reorder Images with Drag and Drop (index.php) The index.php file display the images and allow the user to reorder images by drag and drop. jQuery & Ajax Code: At first, include the jQuery and jQuery UI library to use Ajax and Draggable functionality The following jQuery code is used to enable the jQuery U! Draggable & Sortable features and implement the drag & drop functionality. When order save request is submitted, current images order send to the orderUpdate.php file via Ajax to update the images order in the database. hitps:luw-codexworld.comidrag-drop-mages-reorder-sing-jquery-asnarore Drag and Drop Reorder Images using Query, Ajax, PHP & MySQL - CodexWorld PHP & HTML Code: Initially, all the images are retrieved from the database and listed as per the order specified in ing_order field of images table using PHP and DB class. Once the reorder link is clicked, drag & drop feature is enabled to reorder the images. hitps:luwu.codexworld.comidrag-drop-mages-eorder-using-jquery 2-shp-mysqlsnarore Drag and Drop Reorder Images using Query, Ajax, PHP & MySQL - CodexWorld

1. Drag photos to reorder.
2. Click ‘Save Reordering’ when finished.

reorder_ul reorder-photos-list"> ‘container"> Javascript: void(@);" class="reorder_link" id="saveReorder">reorder photos

getRows(); if (Lempty ($images)){ foreach($images as $row){ » <1i id="image_1i_" class="ui-sortable-handle” " al

Update Images Order (orderUpdate.php) The orderupdate. php file is called by the Ajax request and receive the current images order from the index.php through Ajax. The images IDs string breaks into array and pass to the updatedrder() method of DB class to update the images order. updateorder($idarray) ; > style.css hitps:luwu.codexworld.comidrag-drop-mages-eorder-using-jquery 2-shp-mysqlsnarore Drag and Drop Reorder Images using Query, Ajax, PHP & MySQL - CodexWorld The following CSS code specifies the style for the image list, links, and other elements. hitps:luwu.codexworld.comidrag-drop-mages-eorder-using-jquery 2-shp-mysqlsnarore Drag and Drop Reorder Images using Query, Ajax, PHP & MySQL - CodexWorld body { background: #FFFFFF; margin: @px; font-family: 'Roboto', sans-serif; font-size: 14px; color: #45252; : 400; font -weigh' + -container{ margin-top: 5@px; padding: 1@px; + ul, ol, 1i { margin: @; padding: @; list-style: none; + sreorder_link { color: #367584; border: solid 2px #367584; border-radius: 3px; text-transform: uppercase; background: ##FF; font-size: 18px; padding: 1@px 2@px; margin: ASpx 15px 15px @px; font-weight: bold; text-decoration: none; transition: all 0.355; -moz-transition: all @.355; -webkit-transition: all @.355; -o-transition: all @.35s; white-space: nowrap; + -reorder_linkzhover { color: #FFF; border: solid 2px #367584; background: #367584; box-shadow: none; y teeorder-helper{ margin: 18px 10px; padding: 1@px; y slight_box { background: #efefef; padding: 2@px; margin: 15px @; text-align: center; font-size: 1.2em; hitps:luwu-codexworld.comidrag-drop-images-reorder-sing-jquery-slax-ahp-mysqUsnarote Drag and Drop Reorder Images using Query, Ajax, PHP & MySQL - CodexWorld /* image gallery */ -gallery{ width:100%; float:left; margin-top:10@px; } -gallery ul{ margin:@; padding:@; list-style-type:none;} agallery ul li{ padding: 7px; border:2px solid #cce; float:left; margin:1@px 7px; backg round:none; width:auto; height:auto;} -gallery img( width:25@px;} /* notice box */ «notice, .notice a{ color: #ffF !important; } snotice { z-index: 8888;padding: 1@px;margin-top: snotice a { font-weight: bold; } snotice_error { background: #646360; } snotice_success { background: #657E3F; } 2@px; } Are you want to get implementation help, or modify or extend the functionality of this script? Submit paid service request @ Download Source Code (https://www.codexworld.com/downloads/drag-drop-images- reorder-using-jquery-ajax-php-mysql) ® View Demo (http://demos.codexworld.com/drag-drop-images- reorder-using-jquery-ajax-php-mysql/) Previous Next © Create a custom WordPress Codelgniter Tutorial for * Plugin from scratch Beginners (https://www.codexworld.com/create-a-custom- (https://www.codexworld.com/codeigniter- wordpress-plugin-from-scratch/) tutorial-beginners-learn-codeigniter-scratch/) RECOMMENDED TUTORIALS FOR YOU 23 Comments Matheus Afonso Said... Great tutorial friend, it helped me a lot to solve a problem of a system I! Thank you very much!!! July 22, 2017 at 1:47 AM hitps:luwn-codexworld.comidrag-drop-mages-reorder-sing-jquery-slax-ahp-mysqU onasnarore hitps:luwu.codexworld.comidrag-drop-mages-eorder-using-jquery Drag and Drop Reorder Images using Query, Ajax, PHP & MySQL - CodexWorld Mahesh Said This tutorial awesome July 10, 2017 at 6:48 AM Shawry Mihawk Said... You save my day..may god bless ur life n help u go through hard time.. June 23, 2017 at 3:10 AM Ishaque Said... Brilliant effort! May 27, 2017 at 12:34 PM John Sai Very helpful and the code is clean and solid, thanks! March 8, 2016 at 9:07 PM Eduardo Correia Said. The best ever! Thanks! January 23, 2016 at 10:50 AM Scyfox Said... Hello, Can | submit the ajax call to the same page to avoid having an extra page? ‘Thanks in advance December 6, 2015 at 1:20 AM Jeff Said... How do | get this to work on iphone or ipad? There appears to be touchscreen functionality missing, November 23, 2015 at 8:45 PM Raivindra Yadav Said.. thank you sir,please submit more and more September 23, 2015 at 7:35 AM Sorabh Said... Can anybody tell me that what is the use of this line? if( $('#save_reorder i").length ) 2-shp-mysql rosnarore hitps:luwu.codexworld.comidrag-drop-mages-eorder-using-jquery Drag and Drop Reorder Images using Query, Ajax, PHP & MySQL - CodexWorld August 22, 2015 at 12:39 PM Gianluca Said. Ciao It’s a good script! Is there a solution for drag-drop on tablet? I tried using android but doesn't work. Is drag drop a problem for all touch screen? Thanks G July 26, 2015 at 7:46 AM Sackbut Said... Well done and thanks you - this worked “straight out of the box’. Ill be incorporating it into a site soon July 24, 2015 at 2:32 PM Eric Pieters Sa Can anybody email me what the following line does in the script? Icannot find the reason it is there if( $(’#save_reorder i").length ) June 26, 2015 at 3:46 PM Bessie S; Saved as a favorite, like your blog! February 14, 2015 at 12:54 AM Sven Said... ‘Awesome! Its in fact awesome piece of writing, | have got much clear idea concerning from this post. February 12, 2015 at 9:54 PM. Marilyn Said. Hi, constantly i used to check webpage posts here early in the dawn, since i like to find out more and more. February 11, 2015 at $:36 PM Haley Said. Very nice article, just what I wanted to find. February 11, 2015 at 3:26 AM Bradley Sa 2-shp-mysql anasiroo18 Drag and Drop Reorder Images using {Query Ajax, PHP & MySQL. - Codexold whoah this weblog is magnificent i love studying your articles. Stay up the good work! You already know, lots of individuals are hunting round for this information, you can aid them greatly. February 11, 2015 at 1:58 AM Cindy Saic. Tm not that much of a online reader to be honest but your sites really nice, keep it up! Ill go ahead and bookmark your site to come back later on. Many thanks February 10, 2015 at 3:45 PM Santhosh Kumar Said... Hi .. check your blogs daily. Your writing style is awesome and excellent,, keep up the good work! February 10, 2015 at §:50 AM Samaralayden Said... bookmarkedil, | love your site! February 1, 2015 at 2:02 PM VincentusaH Said... Nice tutorial, please continue posting. December 18, 2014 at 12:42 PM Matt Said... ‘Awesome tutorial. Thank you ! November 27, 2014 at 2:46 PM Leave a reply Comment * Your Name * Your Email * Your Website hitps:luwu.codexworld.comidrag-drop-mages-reorderusing-jquery 2-shp-mysql vana