jQuery UI Sortable scroll 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 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 scroll option. If the scroll option is set to true, the page scrolls when coming to an edge. It is of boolean type & its default value is true.
Syntax:
Initializing the sortable with scroll option having the specific boolean value, which can be given as:
$( "Selector" ).sortable({ scroll: false });
-
To set the scroll option:
$( "Selector" ).sortable( "option", "scroll", false );
-
To get the scroll option:
var scroll = $( "Selector" ).sortable( "option", "scroll" );
CDN Link: Add the 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 scroll option where we have set the scroll option to false and start event will trigger and will display the current scroll option.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href=
<script src=
</script>
<script src=
</script>
<title>jQuery UI Sortable scroll 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 scroll option is "+
$( "#sortableList" ).sortable( "option",
"scroll" )+"<br>");
},
scroll:false
});
});
</script>
</head>
<body>
<center>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h2>jQuery UI Sortable scroll 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 scroll Option
Reference: https://api.jqueryui.com/sortable/#option-scroll
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...