jQuery UI的Droppable创建事件

下面是关于"jQuery UI的Droppable创建事件"的完整攻略，包含两条实例说明：

一、什么是jQuery UI的Droppable？

jQuery UI 是 jQuery 的一个扩展库，它提供了许多特效、组件和工具等功能，其中的Droppable插件允许我们将一个元素设置为可接受拖放的元素。当拖动一个可拖动的元素时，如果它经过了可接受拖放的元素，我们可以在droppable 上触发一些事件。Droppable的创建事件是通过调用 droppable() 方法来完成的；

二、如何使用jQuery UI的Droppable创建事件？

1.基本语法

在创建Droppable时，可以设置一些可选的参数，如tolerance、accept、activeClass、hoverClass等。在这里，我们设置 acceptance 和 hoverClass 两个参数,其余默认：

$( function() {
    $( "#droppable" ).droppable({
        accept: "#draggable",
        hoverClass: "hover"
    });
});

2.事件回调

Droppable使用特定的事件回调函数来响应回调事件。下面是几个可用的事件回调：

drop：当一个可拖动的元素被拖到目标元素中时触发
activate：当元素被拖拽时触发，并且当元素首次进入 droppable 区域时会发生
deactivate：当元素停止拖拽时触发
over：当拖拽元素进入 droppable 区域时触发
out：当拖拽元素从 droppable 区域中移出时触发

3.示例一

在此示例中，我们向页面中添加了两个可拖拽的div元素，分别为#draggable1和#draggable2，并将#droppable设置为一个可放置的元素。有兴趣的话，可以通过添加更多可拖拽和可放置的元素以模拟实际情况。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Droppable示例</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="http://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="http://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <style>
        #draggable1, #draggable2, #droppable {
            width: 80px;
            height: 80px;
            padding: 0.5em;
            border: 1px solid #ccc;
        }
        #droppable {
            width: 150px;
            height: 200px;
            padding: 1em;
            float: left;
            margin: 10px;
        }
    </style>
</head>
<body>
    <div id="draggable1" class="ui-widget-content">
        <p>我是可拖拽的div1</p>
    </div>
    <div id="draggable2" class="ui-widget-content">
        <p>我是可拖拽的div2</p> 
    </div>
    <div id="droppable" class="ui-widget-header">
        <p>拖拽两个div到这里来并看看发生了什么！</p>
    </div>
    <script>
        $( function() {
            $( "#draggable1,#draggable2" ).draggable({
                    revert: "invalid"
            });
            $( "#droppable" ).droppable({
                drop: function( event, ui ) {
                    $( this )
                    .addClass( "ui-state-highlight" )
                    .find( "p" )
                    .html( "dropped!" );
                }
            });
        });
    </script>
</body>
</html>

将上述代码复制到本地文件并打开，您可以拖动div1和div2并放置到目标的droppable选项中。请注意，当我们将一个可拖动元素拖到 droppable 区域中时发生了什么。这是通过使用drop回调来实现的。这个回调函数在元素被拖动到 droppable 区域时触发，并且向p元素添加了一个 dropped！标记。

4.示例二

以下示例演示了droppable的多个事件回调，包括激活、停用、悬停、退出和拖动。在示例中，我们使用一个图片作为可拖动的元素，并将目标指向#droppable2元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Multiple Event Callbacks</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <style>
        #droppable1, #droppable2 {
            width: 150px;
            height: 150px;
            padding: 1em;
            float: left;
            margin: 10px;
        }
        .ui-draggable,
        .ui-droppable {
            background-position: top;
        }
        img {
            max-width: 80px;
            max-height: 80px;
        }
    </style>
</head>
<body>
    <div id="droppable1" class="ui-widget-header">
        <p>将图片拖到区域2来观察事件的回调情况</p>
    </div>
    <div id="droppable2" class="ui-widget-header">
        <p>接受拖放的区域</p>
    </div>
    <img src="http://placehold.it/80x80" alt="" id="draggable">
    <script src="http://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="http://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script>
        $( function() {
            $( "#draggable" ).draggable({
                revert: true,
                start: function() {
                    $( "#droppable1" ).addClass( "ui-state-highlight" );
                },
                stop: function() {
                    $( "#droppable1" ).removeClass( "ui-state-highlight" );
                }
            });
            $( "#droppable1" ).droppable({
                accept: "#draggable",
                classes: {
                    "ui-droppable-hover": "ui-state-hover"
                },
                drop: function( event, ui ) {
                    $( this )
                    .addClass( "ui-state-highlight" )
                    .find( "p" )
                    .html( "dropped!" );
                },
                out: function( event, ui ) {
                    $( this )
                    .removeClass( "ui-state-highlight" )
                    .find( "p" )
                    .html( "移出!" );
                },
                over: function( event, ui ) {
                    $( this )
                    .addClass( "ui-state-hover" )
                    .find( "p" )
                    .html( "悬停!" );
                }
            });
            $( "#droppable2" ).droppable({
                drop: function( event, ui ) {
                    $( this )
                    .addClass( "ui-state-highlight" )
                    .find( "p" )
                    .html( "dropped!" );
                }
            });
        });
    </script>
</body>
</html>

将上述代码复制到本地文件并打开，您可以将图片拖动到droppable1和droppable2中，并观察回调事件的发生状态。在此示例中，使用悬停、退出和拖动等事件来演示回调函数的使用。

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