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

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>

  • HTML code to create structure:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>

    chevron_right

    
    

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:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <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>

    chevron_right

    
    

  • JS code to add the functionality:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <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>

    chevron_right

    
    

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:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
          
    <head>
        <title>
            How to create drag and drop
            features for images reorder
            using HTML CSS and jQueryUI?
        </title>
          
        <link href
                rel = "stylesheet">
          
        <script src
        </script>
          
        <script src
        </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>

    chevron_right

    
    

  • Output:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.