jQuery UI Sortable deactivate 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 will be learning the jQuery UI Sortable deactivate event. This event is triggered when sorting was stopped, is propagated to all possible connected lists.

Syntax:

Initializing the sortable with the specified deactivate callback function:

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

To bind an event listener to the sortdeactivate event:

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

Parameters: This event has 2 parameters that are described below:

event: This parameter specifies the sorting will be stopped & propagated to all possible connected lists.
ui: This is of type object with below-given options:
- helper: The jQuery object representing the sorted helper & is of jQuery type.
- item: The jQuery object represents the current dragged item & is of jQuery type.
- offset: The current absolute position of the helper object which is represented as { top, left } & it is of the Object type.
- position: The current position of the helper object which is represented as { top, left } & it is of the Object type.
- originalPosition: The original position of the helper object which is represented as { top, left } & it is of the Object type.
- sender: The sortable that the item comes from if moving from one sortable to another & is of jQuery type.
- placeholder: The jQuery object representing the element being used as a placeholder & 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 deactivate 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 deactivate 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({ 
                deactivate: function(event, ui) { 
                    $("#sortedList").html($("#sortedList").html()  
                    + "<b>deactivate event is triggered</b><br>"); 
                } 
            }); 
        }); 
    </script> 
</head> 
  
<body> 
    <center> 
        <h1 style="color: green;"> 
            GeeksforGeeks 
        </h1> 
          
        <h2>jQuery UI Sortable deactivate 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>