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 activate event. This event is triggered when using connected lists, every connected list on drag starts receiving it.
Syntax:
Initializing the sortable with the specified activate callback function:
$( "Selector" ).sortable({ receive: function( event, ui ) {} });-
To bind an event listener to the sortactivate event:
$( "Selector" ).on( "sortactivate", function( event, ui ) {} );
Parameters: This event has 2 parameters:
- event: This event is a parameter value that specifies every connected list on the drag that starts receiving when an event is triggered.
-
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 activate event.
<!DOCTYPE html> <html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href=
<script src=
</script>
<script src=
</script>
<title>jQuery UI Sortable activate 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({
activate: function(event, ui) {
$("#sortedList").html($("#sortedList").html()
+ "<b>activate event is triggered</b><br>");
}
});
});
</script>
</head>
<body>
<center>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h2>jQuery UI Sortable activate 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 activate Event
Reference: https://api.jqueryui.com/sortable/#event-activate