jQuery UI的Draggable start事件

jQuery UI由使用jQuery、CSS和HTML实现的GUI小工具、视觉效果和主题组成。 jQuery UI非常适用于为网页构建UI界面。

在这篇文章中，我们将了解jQuery UI的Draggable启动事件。我们可以在整个页面上拖动任何HTML元素。

语法:

$( ".selector" ).draggable({
    start: function( event, ui ) {}
});

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

<link rel=”stylesheet” href=”//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css”>
<script src=”//code.jquery.com/jquery-1.12.4.js”></script>
<script src=”//code.jquery.com/ui/1.12.1/jquery-ui.js”></script>

例子1：在这个例子中，一个盒子被设置为可拖动。我们使用一个回调start事件，我们将定义一个函数来改变文本和背景的颜色。

<!doctype html>
<html>
    
<head>
    <title>jQuery UI Draggable start event</title>
    <link rel="stylesheet" href=
"//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.12.4.js"></script>
    <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></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 start event</h3>
  
    <div id="draggable_box">Drag this box.</div>
  
    <script>
         $("#draggable_box").draggable({             start: function (event, ui) {$ (this).css("background-color", "green");
                $(this).css("color", "white")
            }
        });
    </script>
</body>
  
</html>

输出:

jQuery UI的Draggable启动事件

例子2：我们可以在元素上设置各种动作。在这个例子中，我们将使用开始事件对盒子进行动画处理。

<!doctype html>
<html>
    
<head>
    <title>jQuery UI Draggable start event</title>
    <link rel="stylesheet" href=
"//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.12.4.js"></script>
    <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></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 start event</h3>
  
    <div id="draggable_box">Drag this box.</div>
  
    <script>
         $("#draggable_box").draggable({             start: function (event, ui) {$ (this).animate({
                    width: "200px",
                    height: "200px",
                    backgroundColor: "green",
                }, "slow");
            }
        });
    </script>
</body>
  
</html>

输出:

jQuery UI的Draggable启动事件