jQuery UI Sortable change Event

Last Updated : 07 Feb, 2022

jQuery UI is a web-based technology and consists of various GUI widgets, visual effects, and themes. These features can be implemented using the jQuery, JavaScript Library. jQuery UI is the best tool for building UI interfaces for the webpages. It can also be used to build highly interactive web applications or can be used to add widgets easily.

In this article, we are going to learn about the jQuery UI Sortable change event. During sorting, this event will only be triggered, when the position of the DOM has changed.

Syntax:

Initializing the sortable with the specified change callback function:

$( "Selector" ).sortable({ change: function( event, ui ) {} });

To bind an event listener to the sortchange event:

$( "Selector" ).on( "sortchange", function( event, ui ) {} );

Parameters: This event accepts 2 parameters:

event: It is an event that will be activated to change the DOM position for which sortable plugins are applied.
ui: The ui can be used to style for its look & feel. It is of an object type & contains the following values:
- helper: The jQuery object illustrates the helper being sorted & it is of jQuery type.
- item: The jQuery object illustrates the current dragged element & it is of jQuery type.
- offset: The current absolute position of the helper is represented as { top, left } & it is of the Object type.
- position: The current position of the helper is represented as { top, left } & it is of the Object type.
- originalPosition: The original position of the element represented as { top, left } & it is of Object type.
- sender: The sortable is performed with the item that comes from if the item is moving from one sortable to another & it is of jQuery type.
- placeholder: The jQuery object illustrates the element being used as a placeholder & it is of jQuery type.

CDN Link: Add jQuery Mobile scripts needed for your project.

<link rel=”stylesheet” href=”https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css”>
<script src= “https://code.jquery.com/jquery-1.12.4.js”></script>
<script src= “https://code.jquery.com/ui/1.12.1/jquery-ui.js”></script>

Example: The below example illustrates the implementation of the jQuery UI Sortable change event.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <meta charset="utf-8"> 
    <link rel="stylesheet" href= 
"https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
    <script src= 
"https://code.jquery.com/jquery-1.12.4.js"> 
    </script> 
    <script src= 
"https://code.jquery.com/ui/1.12.1/jquery-ui.js"> 
    </script> 
    <title>jQuery UI Sortable change event</title> 
    <style> 
        #sortableList { 
            list-style-type: none; 
        } 
        .geeks { 
            margin: 10px; 
            background: lightgreen; 
            padding: 10px; 
            border: 1px solid green; 
            font-size: 25px; 
        } 
    </style> 
    <script> 
        $(function() { 
            $('#sortableList').sortable({ 
                change: function(event, ui) { 
                    $("#sortedList").html($("#sortedList").html()  
                    + "<b>Change event is triggered</b><br>"); 
                } 
            }); 
        }); 
    </script> 
</head> 
  
<body> 
    <center> 
        <h1 style="color: green;"> 
            GeeksforGeeks 
        </h1> 
        <h2>jQuery UI Sortable change event</h2> 
        <ul id="sortableList"> 
            <li id="Tutorials" class="geeks"> 
                1.Free Tutorials  
            </li> 
            <li id="Articles" class="geeks"> 
                2.Millions of articles  
            </li> 
            <li id="Webinars" class="geeks"> 
                3.Webinars by Industry Experts  
            </li> 
            <li id="Courses" class="geeks"> 
                4.Live, Online and Classroom Courses  
            </li> 
        </ul> 
        <h2> 
            <span id='sortedList'></span> 
        </h2>  
    </center> 
</body> 
  
</html>