How to create a drag and drop feature for reordering the images using HTML CSS and jQueryUI ? Last Updated : 21 Aug, 2024 Comments Improve Suggest changes Like Article Like Report In this article, we are given an images gallery and the task is to re-arrange the order of images in the list or grid by dragging and dropping. The jQuery UI framework provides a sortable() function that helps in re-ordering list items by using the mouse. With this functionality, the list items become interchangeable. The jQuery UI provides a sortable() function with default draggable properties. All the list elements in the HTML document are interchangeable and re-ordered for displaying. The user can drag and drop elements to a new position with the help of the mouse. Other elements adjust themselves to fit in the list. Creating structure: In this section, we normally include the required jQueryUI link and libraries. Also, we will create a basic image gallery where we will perform the drag-and-drop functionality to reorder the gallery list.Including all the required jQuery and jQuery UI libraries:<link href ="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel = "stylesheet"> <script src = "https://code.jquery.com/jquery-1.10.2.js"></script><script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>The below steps are followed to create the structure:HTML code to create structure: CSS code to design the structure: JS code to add the functionality: html <!DOCTYPE html> <html> <head> <title> drag and drop features for images reorder using HTML CSS and jQueryUI </title> </head> <body> <h1 style="color:green">GeeksforGeeks</h1> <b>Drag and drop using jQuery UI Sortable</b> <div class="height"></div><br> <div id="imageListId"> <div id="imageNo1" class="listitemClass"> <img src="images/geeksimage1.png" alt=""> </div> <div id="imageNo2" class="listitemClass"> <img src="images/geeksimage2.png" alt=""> </div> <div id="imageNo3" class="listitemClass"> <img src="images/geeksimage3.png" alt=""> </div> <div id="imageNo4" class="listitemClass"> <img src="images/geeksimage4.png" alt=""> </div> <div id="imageNo5" class="listitemClass"> <img src="images/geeksimage5.png" alt=""> </div> <div id="imageNo6" class="listitemClass"> <img src="images/geeksimage6.png" alt=""> </div> </div> <div id="outputDiv"> <b>Output of ID's of images : </b> <input id="outputvalues" type="text" value="" /> </div> </body> </html> CSS <style> /* text align for the body */ body { text-align: center; } /* image dimension */ img { height: 200px; width: 350px; } /* imagelistId styling */ #imageListId { margin: 0; padding: 0; list-style-type: none; } #imageListId div { margin: 0 4px 4px 4px; padding: 0.4em; display: inline-block; } /* Output order styling */ #outputvalues { margin: 0 2px 2px 2px; padding: 0.4em; padding-left: 1.5em; width: 250px; border: 2px solid dark-green; background: gray; } .listitemClass { border: 1px solid #006400; width: 350px; } .height { height: 10px; } </style> JavaScript $(function () { $("#imageListId").sortable({ update: function (event, ui) { getIdsOfImages(); } //end update }); }); function getIdsOfImages() { var values = []; $('.listitemClass').each(function (index) { values.push($(this).attr("id") .replace("imageNo", "")); }); $('#outputvalues').val(values); } Output:jQuery is an open-source JavaScript library that simplifies the interactions between an HTML/CSS document, It is widely famous for it's philosophy of “Write less, do more". You can learn jQuery from the ground up by following this jQuery Tutorial and jQuery Examples. Comment More infoAdvertise with us Next Article How to create a drag and drop feature for reordering the images using HTML CSS and jQueryUI ? G geetanjali16 Follow Improve Article Tags : Web Technologies JQuery jQuery-Questions Similar Reads How to create Dynamic Drag and Drop table rows using jQuery Ajax? In this article, we will discuss the method of How to create Dynamic and Drop table rows using JQuery Ajax. We will use jQuery and HTML CSS to perform the operations of Drag and Drop on the table row.First to perform the operations of the Drag and Drop table row we need two jQuery libraries without 4 min read How to Drag and Drop Images using HTML5 ? In this article, we will see how to create a drag and drop functionality using HTML5. Approach: The following approach will be implemented to Drag and Drop Images using HTML5. We have given a rectangle area and an image, the task is to drag the image and drop it into the rectangle.We have to enable 2 min read How to make an image draggable in HTML? Drag and drop is a very common and widely used feature in a modern-day website. It simply means to drag an image with the cursor and drop it to any other place. In this article, we are going to learn how to make an image draggable using HTML 5.Making any HTML5 elements including images draggable is 1 min read jQuery UI | draggable() and droppable() methods jQuery UI is a mixture of methods and a set of user interface effects, widgets, interactions and themes which can be provided in the web page using jQuery methods. If you want to build up a powerful web application that includes various features such as dragging, dropping, date picker, tooltips, etc 5 min read jQuery UI Droppable activeClass Option jQuery UI consists of GUI widgets, visual effects, and themes implemented using jQuery, CSS, and HTML. jQuery UI is great for building UI interfaces for the webpages. The jQuery UI Droppable activeClass option is used to add the class that will be added to the droppable while an acceptable draggable 1 min read jQuery UI Draggable Complete Reference The jQuery UI Draggable widget is used to perform drag events. This widget allows elements to be moved by using the mouse. There are lots of options, methods and events are available in this widget, all of them are listed and categorized below.jQuery UI Draggable Widget Options: jQuery UI Draggable 2 min read jQuery UI Draggable distance Option The jQuery UI consists of GUI widgets, visual effects, and themes implemented using jQuery, CSS, and HTML. jQuery UI is great for building UI interfaces for the webpages. The jQuery UI Draggable distance Option is used to set the distance in pixels after which dragging starts. Syntax: $( ".selector" 1 min read script.aculo.us Drag & Drop Containment Option This script.aculo.us Drag & Drop Containment Option is used to create an array of elements. That has to be parented and the drop area will only accept those, you can drag a draggable element to a drop area. In that drop area, the element will be placed if the Containment is the same as the id of 2 min read jQuery UI Draggable containment Option jQuery UI consists of GUI widgets, visual effects, and themes implemented using the jQuery JavaScript Library. jQuery UI is great for building UI interfaces for the webpages. It can be used to build highly interactive web applications or can be used to add widgets easily. In this article, we are goi 2 min read jQuery UI Droppable accept Option jQuery UI consists of GUI widgets, visual effects, and themes implemented using jQuery, CSS, and HTML. jQuery UI is great for building UI interfaces for the webpages. The jQuery UI Droppable accept option is used to control the draggable elements that are accepted by the droppable. It accepts a valu 1 min read Like