jQuery UI Sortable scrollSpeed 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 scrollSpeed option that specifies the speed for which the window should scroll, once the mouse pointer gets within the scroll sensitivity range. It is of number type & its default value is 20.
Syntax:
Initializing the sortable with the scrollSpeed option having the specific number value, which can be given as:
$( "Selector" ).sortable({ scrollSpeed: 40 });
-
Setting the scrollSpeed option:
$( "Selector" ).sortable( "option", "scrollSpeed", 40 );
-
Getting the scrollSpeed option:
var scrollSpeed = $( "Selector" ).sortable( "option", "scrollSpeed" );
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 scrollSpeed option where we have changed the scrollSpeed option to 40, and the start event will trigger that display the current scrollSpeed option.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href=
<script src=
</script>
<script src=
</script>
<title>jQuery UI Sortable scrollSpeed 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 scrollSpeed is "
+ $("#sortableList").sortable("option", "scrollSpeed")
+ "<br>");
},
scrollSpeed: 40
});
});
</script>
</head>
<body>
<center>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h2>jQuery UI Sortable scrollSpeed 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>
|
Output:
jQuery UI Sortable scrollSpeed Option
Reference: https://api.jqueryui.com/sortable/#option-scrollSpeed
Share your thoughts in the comments
Please Login to comment...