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

Last Updated : 21 Aug, 2024

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.

geetanjali16

Improve

Article Tags :

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

Similar Reads

Thank You!

What kind of Experience do you want to share?