jQuery UI 可拖动启动事件

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

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

句法：

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

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

示例 1：在此示例中，将一个框设置为可拖动。我们正在使用回调开始事件，我们将定义一个改变文本和背景颜色的函数。

HTML

    

    jQuery UI Draggable start event
    
    
    
    
        #draggable_box {
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: roboto;
            width: 100px;
            height: 100px;
            background: #ccc;
            border-radius: 10px;
        }
    

  

    
        GeeksforGeeks
    
    jQuery UI Draggable start event
  
    Drag this box.
  
    
        $("#draggable_box").draggable({
            start: function (event, ui) {
                $(this).css("background-color", "green");
                $(this).css("color", "white")
            }
        });
    

  

输出：

示例 2：我们可以在元素上设置各种操作。在此示例中，我们将使用start事件为框设置动画。

HTML

    

    jQuery UI Draggable start event
    
    
    
    
        #draggable_box {
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: roboto;
            width: 100px;
            height: 100px;
            background: #ccc;
            border-radius: 10px;
        }
    

  

    
        GeeksforGeeks
    
    jQuery UI Draggable start event
  
    Drag this box.
  
    
        $("#draggable_box").draggable({
            start: function (event, ui) {
                $(this).animate({
                    width: "200px",
                    height: "200px",
                    backgroundColor: "green",
                }, "slow");
            }
        });
    

  

输出：

参考： https://api.jqueryui.com/draggable/#event-start