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 over event. This event is triggered when a sortable item is moved into a sortable list.
Syntax:
Initializing the sortable with the specified over callback function:
$( "Selector" ).sortable({ over: function( event, ui ) {} });-
To bind an event listener to the sortover event:
$( "Selector" ).on( "sortover", function( event, ui ) {} );
Parameters: This event has 2 parameters that are described below:
- event: This parameter specifies the sortable items that are placed into the sortable list.
-
ui: This is of type object with below-given options:
- helper: The jQuery object representing the sorted helper & is of jQuery type.
- item: The jQuery object represents the current dragged item & is of jQuery type.
- offset: The current absolute position of the helper object which is represented as { top, left } & it is of the Object type.
- position: The current position of the helper object which is represented as { top, left } & it is of the Object type.
- originalPosition: The original position of the helper object which is represented as { top, left } & it is of the Object type.
- sender: The sortable that the item comes from if moving from one sortable to another & is of jQuery type.
- placeholder: The jQuery object representing the element being used as a placeholder & is of jQuery type.
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 implementation of the jQuery UI Sortable over event.
<!DOCTYPE html> <html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href=
<script src=
</script>
<script src=
</script>
<title>jQuery UI Sortable over event</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({
over: function(event, ui) {
$("#sortedList").html($("#sortedList").html()
+ "<b>over event is triggered</b><br>");
}
});
});
</script>
</head>
<body>
<center>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h2>jQuery UI Sortable over event</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 over Event
Reference: https://api.jqueryui.com/sortable/#event-over