Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

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

  • Difficulty Level : Easy
  • Last Updated : 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.

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

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:




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

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




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!