How to create a drag and drop feature for reordering the images using HTML CSS and jQueryUI ?

03 Aug, 2021
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 which 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>
<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>
HTML code to create structure:<!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">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>
<!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">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>
Design the structure: In this section, we will design the pre-created structure and add the drag and drop feature by adding JavaScript code.
CSS code to design the structure:<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>
<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>
JS code to add the functionality:<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>
<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>
Final solution: In this section, we will combine all the above sections codes and achieve our task where you can perform the drag and drop to re-order the images in the image gallery.
Program:<!DOCTYPE html><html>      <head>    <title>        How to create drag and drop        features for images reorder        using HTML CSS and jQueryUI?    </title>          <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>              <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>              <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></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>
<!DOCTYPE html><html>      <head>    <title>        How to create drag and drop        features for images reorder        using HTML CSS and jQueryUI?    </title>          <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>              <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>              <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></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>
Output:
jQuery is an open source JavaScript library that simplifies the interactions between an HTML/CSS document, It is widely famous with it’s philosophy of “Write less, do more”.You can learn jQuery from the ground up by following this jQuery Tutorial and jQuery Examples.
CSS-Misc
HTML-Misc
JavaScript-Misc
jQuery-Misc
CSS
HTML
JavaScript
JQuery
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to set space between the flexbox ?
Design a Tribute Page using HTML & CSS
Build a Survey Form using HTML and CSS
Form validation using jQuery
Design a web page using HTML and CSS
REST API (Introduction)
Hide or show elements in HTML using display property
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
HTTP headers | Content-Type