jQuery UI的Droppable over事件

当我们使用jQuery UI的Droppable组件时，我们可以为每个Droppable添加一个over事件。该事件会在拖拽元素进入该Droppable并在该Droppable上移动时触发。

下面是完整的Droppable over事件攻略：

1. 基本语法

要为Droppable添加over事件处理程序，首先要使用droppable()方法初始化Droppable。然后，我们可以使用以下语法为每个Droppable添加over事件：

$( ".selector" ).droppable({
    over: function( event, ui ) {
        // 拖拽元素悬停在此 Droppable 元素上时，执行的代码
    }
});

其中，over是事件名称，function(event, ui)是事件处理程序，event是鼠标事件对象，ui是拖拽元素的相关信息。

2. 示例说明

2.1 实例1

下面是一个基本的Droppable over事件示例，当拖拽元素进入带有.demo类的div元素时，它的背景颜色将改变：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Droppable over Event</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <style>
        .demo { width: 150px; height: 150px; padding: 0.5em; margin: 10px; border: 1px solid #555; float: left; }
        .dropped { background-color: #ff0; }
    </style>
    <script src="//code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script>
        $(document).ready(function(){
            $( ".demo" ).droppable({
                over: function( event, ui ) {
                    $(this).addClass("dropped");
                }
            });
        });
    </script>
</head>
<body>
    <div class="demo">Droppable Area 1</div>
    <div class="demo">Droppable Area 2</div>

    <div style="clear:both;"></div>
</body>
</html>

在该示例中，我们使用了addClass()方法为带有.demo类的div元素添加了.dropped类，从而将元素的背景颜色改变为黄色。

2.2 实例2

下面是另一个Droppable over事件示例，当拖拽元素进入带有.demo2类的div元素时，它的背景颜色将根据鼠标位置动态改变：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Droppable over Event</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <style>
        .demo2 { width: 150px; height: 150px; padding: 0.5em; margin: 10px; border: 1px solid #555; float: left; }
        .dropped2 { background-color: #ff0; }
    </style>
    <script src="//code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script>
        $(document).ready(function(){
            $( ".demo2" ).droppable({
                over: function( event, ui ) {
                    var $this = $(this),
                        x = event.pageX - $this.offset().left,
                        y = event.pageY - $this.offset().top,
                        coords = "calc(" + x + "px - 50%) calc(" + y + "px - 50%)";
                    $this.css("backgroundPosition", coords);
                }
            });
        });
    </script>
</head>
<body>
    <div class="demo2">Droppable Area 1</div>
    <div class="demo2">Droppable Area 2</div>

    <div style="clear:both;"></div>
</body>
</html>

在该示例中，我们使用了pageX和pageY属性获取鼠标相对于页面的坐标，然后使用offset()方法获取带有.demo2类的div元素相对于页面的偏移量，计算出鼠标相对于元素中心点的坐标，最后使用css()方法动态设置元素的backgroundPosition属性，从而改变背景图片的显示位置。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery UI的Droppable over事件 - Python技术站

jQuery UI的Droppable over事件

1. 基本语法

2. 示例说明

2.1 实例1

2.2 实例2

相关文章