jQuery UI draggable stop事件

在这篇文章中，我们将学习如何使用jQuery UI的Draggable停止事件。Draggable将被用来在整个网页上拖动HTML元素。

jQuery UI的Draggable由选项、方法和事件组成。stop就是一个Draggable事件的例子。现在让我们了解一下stop事件到底会做什么。当用户开始拖动网页中的任何特定元素时，因为他停止了拖动或释放了鼠标按钮，这将停止该元素的拖动，这时我们可以使用回调函数来绑定一些附加事件。例如，随着拖动的停止，文本的颜色将被改变，或者随着拖动的停止，盒子的大小将变大。现在我们可以在下面的例子中看到这个动作。

语法:

$( ".selector" ).draggable({
      stop: function( event, ui ) {
        // Write the Code 
      }
});

参数:

event。这属于事件类型。
ui。它是一个对象类型，有一个空对象，是为了与其他事件保持一致而添加的。
- helper。这是被拖动的帮助器对象。
- position。这是帮助者的当前位置，作为{顶部，左侧}对象。
- offset。这是帮助器的偏移位置，作为 { top, left } 对象。

CDN链接：首先，我们要添加项目所需的jQuery UI脚本。

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

例子1：在这个例子中，我们将使用stop事件，当拖动被停止时，文本颜色将从黑色变为蓝色。

<!doctype html>
<html lang="en">
  
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href=
"https://code.jquery.com/ui/1.13.0/themes/dark-hive/jquery-ui.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
    </script>
    <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"
        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>

输出:

jQuery UI draggable stop事件

例子2：在这个例子中，当拖动被停止时，一个盒子的尺寸会变大。

<!doctype html>
<html lang="en">
  
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href=
"https://code.jquery.com/ui/1.13.0/themes/dark-hive/jquery-ui.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
    </script>
    <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"
        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>

输出:

jQuery UI draggable stop事件