In this article, we are going to learn that how we can use the jQuery UI Draggable stop event. Draggable will be used to drag the HTML element throughout the webpage.
jQuery UI Draggable consists of options, methods, and events. The stop is one example of a Draggable event. Now let’s understand what exactly will stop event do. When the user starts dragging any certain element in the webpage as he stopped dragging or releasing the mouse button that will stop the dragging of the element, at that time we can use the callback function to bind some addition event. For example, as dragging stops, the text color will get changed, or as dragging stops, the box size gets bigger. Now we can see that action in the following examples.
Syntax:
$( ".selector" ).draggable({
stop: function( event, ui ) {
// Write the Code
}
});
Parameters:
- event: This is of type event.
-
ui: It is of an object type with an empty object that is added in order to make consistency with other events.
- helper: This is the helper object which is being dragged.
- position: This is the current position of the helper as { top, left } object.
- offset: This is the offset position of the helper as { top, left } object.
CDN Link: First of all, we have to add the jQuery UI scripts that are needed for the project.
<link rel=”stylesheet” href=”//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css”>
<script src=”//code.jquery.com/ui/1.12.1/jquery-ui.js”></script>
<script src=”//code.jquery.com/jquery-1.12.4.js”></script>
Example 1: In this example, we will use the stop event, and as the dragging gets stopped the text color will be changed from black to blue.
<!doctype html> <html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href=
<script src=
</script>
integrity=
"sha256-xH4q8N0pEzrZMaRmd7gQVcTZiFei+HfRTBPJ1OGXC0k=" crossorigin="anonymous">
</script>
<style>
#draggable_box {
display: flex;
align-items: center;
justify-content: center;
font-family: roboto;
width: 100px;
height: 100px;
background: #ccc;
border-radius: 10px;
}
</style>
</head>
<body>
<h1 style="color:green">
GeeksforGeeks
</h1>
<h3>jQuery UI Draggable stop event</h3>
<div id="draggable_box">Drag this box.</div>
<script>
$("#draggable_box").draggable({
stop: function (event, ui) {
$(this).css("color", "blue");
},
});
</script>
</body>
</html>
|
Output:
Example 2: In this example, when the dragging gets stopped then the size of a box gets bigger.
<!doctype html> <html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href=
<script src=
</script>
integrity=
"sha256-xH4q8N0pEzrZMaRmd7gQVcTZiFei+HfRTBPJ1OGXC0k=" crossorigin="anonymous">
</script>
<style>
#draggable_box {
display: flex;
align-items: center;
justify-content: center;
font-family: roboto;
width: 100px;
height: 100px;
background: #ccc;
border-radius: 10px;
}
</style>
</head>
<body>
<h1 style="color:green">
GeeksforGeeks
</h1>
<h3>jQuery UI Draggable stop event</h3>
<div id="draggable_box">Drag this box.</div>
<script>
$("#draggable_box").draggable({
stop: function (event, ui) {
$(this).animate({
width: "200px",
height: "200px",
backgroundColor: "green",
}, "fast");
},
});
</script>
</body>
</html>
|
Output:
Reference: https://api.jqueryui.com/draggable/#event-stop