jQuery UI Sortable scrollSensitivity Option

Last Updated : 20 Jan, 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 using the jQuery UI Sortable scrollSensitivity option to define how near the mouse must be to an edge to start scrolling.

Syntax:

$( ".selector" ).sortable({scrollSensitivity: 30});

To set the scrollSensitivity option:

$( ".selector" ).sortable( "option", "scrollSensitivity", 30 );

To get the scrollSensitivity option:

var scrollSensitivity = $( ".selector" )
    .sortable( "option", "scrollSensitivity" );

Note: The default value of scrollSenitivity option is 10.

CDN Link: First, add jQuery Mobile scripts needed for your project.

<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>
<link rel=”stylesheet” href=”https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css”>

Example: The below program will illustrate the use of the jQuery UI scrollSensitivity option, In the below program we will set the scrollSensitivity option to 30 and start event will trigger and show the current scrollSensitivity 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 scrollSensitivity 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 scrollSensitivity is "+ 
                $( "#sortableList" ).sortable( "option", 
                                              "scrollSensitivity" )+"<br>"); 
                }, 
                scrollSensitivity:30 
            }); 
        }); 
    </script> 
</head> 
  
<body> 
    <center> 
        <h1 style="color: green;"> 
            GeeksforGeeks 
        </h1> 
        <h4>jQuery UI Sortable scrollSensitivity option</h4> 
  
        <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>