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> How to create drag and drop features for images reorder using HTML CSS and jQueryUI? </title></head> <body> <h1 style="color:green">neveropen</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/neveropenimage1.png" alt=""> </div> <div id="imageNo2" class = "listitemClass"> <img src="images/neveropenimage2.png" alt=""> </div> <div id="imageNo3" class = "listitemClass"> <img src="images/neveropenimage3.png" alt=""> </div> <div id="imageNo4" class = "listitemClass"> <img src="images/neveropenimage4.png" alt=""> </div> <div id="imageNo5" class = "listitemClass"> <img src="images/neveropenimage5.png" alt=""> </div> <div id="imageNo6" class = "listitemClass"> <img src="images/neveropenimage6.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
<script> $(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); }</script> |
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.
