Skip to content
Related Articles

Related Articles

jQuery UI Draggable stop Event

Improve Article
Save Article
Like Article
  • Last Updated : 29 Dec, 2021

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.

HTML




<!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:

jQuery UI Draggable stop Event

Example 2: In this example, when the dragging gets stopped then the size of a box gets bigger.

HTML




<!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:

jQuery UI Draggable stop Event

Reference: https://api.jqueryui.com/draggable/#event-stop


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!