jQuery UI Sortable tolerance Option

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 tolerance option that specifies which mode can be used for testing whether the item being moved is hovering over another item. It is of string type & its default value is “intersect”.

Possible values for the Tolerance option:

intersect: The sorting will start when the item overlaps the other item by at least 50%.
pointer: The sorting will start when the mouse pointer overlaps the other item.

Syntax:

Initializing the sortable with the tolerance option having the specific string value:

$( "Selector" ).sortable({ tolerance: "pointer" });

Setting the tolerance option:

$( "Selector" ).sortable( "option", "tolerance", "pointer" );

Getting the tolerance option:

var tolerance = $( "Selector" ).sortable( "option", "tolerance" );

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 jQuery UI Sortable tolerance option where we will set the value of the tolerance option as “pointer” and the start event will trigger that displays the current tolerance option.

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 tolerance option</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({ 
                start: function(event, ui) { 
                    $("#sortedList").html($("#sortedList").html()  
                    + "Start event triggered when tolerance is "  
                    + $("#sortableList").sortable("option", "tolerance")  
                    + "<br>"); 
                }, 
                tolerance: "pointer" 
            }); 
        }); 
    </script> 
</head> 
  
<body> 
    <center> 
        <h1 style="color: green;"> 
            GeeksforGeeks 
        </h1> 
        
        <h2>jQuery UI Sortable tolerance option</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>