jQuery UI Sortable distance 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 distance option that specifies the sorting will not start until after the mouse is dragged beyond that specified distance. It can be used which allows for the click on the elements within the applicable distance. It is of number type & its default value is 1.

Syntax:

$( "Selector" ).sortable({ distance: 10 });

Setting the distance option:

$( "Selector" ).sortable( "option", "distance", 10 );

Getting the distance option:

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

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 distance option, where we will set the distance option to 10, and the start event will trigger that will display the current distance 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 distance 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 distance is "  
                    + $("#sortableList").sortable("option", "distance")  
                    + "<br>"); 
                }, 
                distance: 10 
            }); 
        }); 
    </script> 
</head> 
  
<body> 
    <center> 
        <h1 style="color: green;"> 
            GeeksforGeeks 
        </h1> 
        <h2>jQuery UI Sortable distance 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>