{"id":160,"date":"2014-10-04T18:47:03","date_gmt":"2014-10-04T18:47:03","guid":{"rendered":"https:\/\/www.codexworld.com\/?p=160"},"modified":"2024-05-16T04:40:11","modified_gmt":"2024-05-16T04:40:11","slug":"drag-drop-images-reorder-using-jquery-ajax-php-mysql","status":"publish","type":"post","link":"https:\/\/www.codexworld.com\/drag-drop-images-reorder-using-jquery-ajax-php-mysql\/","title":{"rendered":"Drag and Drop Reorder Images using jQuery, Ajax, PHP & MySQL"},"content":{"rendered":"

Drag and Drop<\/b> feature makes the web page user-friendly and provides a nice user interface for the web application. Using jQuery and jQuery UI library, the drag&drop functionality can be implemented easily. The jQuery UI provides an easy way to add draggable functionality to the DOM element. This tutorial shows you the uses of the jQuery drag-and-drop feature to sort the list elements dynamically with the database.<\/p>\n

If you 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 using jQuery and PHP. The example script demonstrates 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<\/b> functionality is very useful for managing images gallery, users list, and other dynamic content lists.<\/p>\n

The example code helps to implement dynamic drag and drop reorder images using jQuery, Ajax, PHP, and MySQL<\/b>. This sample code also can be used to implement the drag and drop reorder the list, rows, or sorting elements.<\/p>\n

Before getting started, take a look at the files structure to build drag and drop reorder images<\/b> functionality using jQuery, Ajax, PHP, and MySQL.<\/p>\n

dragdrop_reorder_images\/<\/span>\r\n\u251c\u2500\u2500 index.php\r\n\u251c\u2500\u2500 orderUpdate.php\r\n\u251c\u2500\u2500 DB.class.php\r\n\u251c\u2500\u2500 js\/<\/span>\r\n\u2502   \u251c\u2500\u2500 jquery.min.js\r\n\u2502   \u2514\u2500\u2500 jquery-ui.min.js\r\n\u251c\u2500\u2500 css\/<\/span>\r\n\u2502   \u2514\u2500\u2500  style.css\r\n\u2514\u2500\u2500 images\/<\/span>\r\n<\/pre>\n
Create Database Table<\/h2>\n
To store images and their display order, a table needs to be created in the database. The following SQL creates an images<\/code> table with some basic required fields in the MySQL database.<\/p>\n
CREATE<\/span> TABLE<\/span> `images`<\/span> (\r\n `id`<\/span> int<\/span>(11<\/span>) NOT<\/span> NULL<\/span> AUTO_INCREMENT,\r\n `file_name`<\/span> varchar<\/span>(100<\/span>) COLLATE<\/span> utf8_unicode_ci NOT<\/span> NULL<\/span>,\r\n `img_order`<\/span> int<\/span>(5<\/span>) NOT<\/span> NULL<\/span> DEFAULT<\/span> '0'<\/span>,\r\n `created`<\/span> datetime NOT<\/span> NULL<\/span>,\r\n `modified`<\/span> datetime NOT<\/span> NULL<\/span>,\r\n PRIMARY KEY<\/span> (`id`<\/span>)\r\n) ENGINE<\/span>=InnoDB<\/span> DEFAULT<\/span> CHARSET<\/span>=utf8 COLLATE<\/span>=utf8_unicode_ci;<\/pre>\n
DB Class (DB.class.php)<\/h2>\n
The DB class controls all the database related works (connect, fetch and update records). Specify the database host ($dbHost<\/code>), username ($dbUsername<\/code>), password ($dbPassword<\/code>), and name ($dbName<\/code>) as per your MySQL database credentials.
\nThe DB class has two methods to fetch and update images data.<\/p>\n