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.