jQuery UI Droppable disable() 方法(1)

📌 相关文章

📜 jQuery UI Droppable disable() 方法(1)

📅 最后修改于: 2023-12-03 15:02:11.905000 🧑 作者: Mango

jQuery UI Droppable disable() 方法

jQuery UI Droppable 插件是 jQuery UI 的一部分，它提供了一种使用简单、易于定制和高度可扩展的方式来使 HTML 元素支持被拖放，同时还可以检查拖放操作和事件。disable() 是 Droppable 插件提供的一个方法，可以用于禁用一个元素的拖放功能。

方法语法

$(selector).droppable("disable");

参数

参数 | 描述 ---|--- selector | 必需，要应用 droppable() 方法的元素的选择器表达式。

使用说明

在某些情况下，您可能需要在运行时禁用一个元素的拖放功能。此时，可以使用 Droppable 插件提供的 disable() 方法来实现：

$("#droppable").droppable("disable");

在上面的代码片段中，我们选中了一个带有 id="droppable" 的 HTML 元素，然后使用 droppable() 方法初始化它为 droppable 对象。接着，我们调用 droppable 对象提供的 disable() 方法，从而禁用了该元素的拖放功能。

返回值

disable() 方法没有返回值。

示例代码

以下示例演示了如何使用 Droppable 插件的 disable() 方法：

<!DOCTYPE html>
<html>
<head>
    <title>jQuery UI Droppable disable() 方法示例</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="//cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.css">
    <style type="text/css">
        #droppable {
            width: 150px;
            height: 150px;
            background-color: #ccc;
        }
        
        #draggable {
            width: 100px;
            height: 100px;
            background-color: #f00;
        }
    </style>
    <script src="//cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="//cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script>
        $(document).ready(function(){
            // 初始化 droppable 对象
            $("#droppable").droppable({
                drop: function(event, ui) {
                    // 在 droppable 元素上添加拖放元素的 HTML 内容
                    $(this).append(ui.draggable.html());
                }
            });
            
            $("#disableBtn").click(function(){
                // 禁用 droppable 元素的拖放功能
                $("#droppable").droppable("disable");
            });
            
            $("#enableBtn").click(function(){
                // 启用 droppable 元素的拖放功能
                $("#droppable").droppable("enable");
            });
        });
    </script>
</head>
<body>
    <h1>jQuery UI Droppable disable() 方法示例</h1>
    <p>
        <button id="disableBtn">禁用拖放</button>
        <button id="enableBtn">启用拖放</button>
    </p>
    <div id="droppable">
        将 drag me 元素拖放到此处
    </div>
    <div id="draggable" class="ui-widget-content">
        drag me
    </div>
</body>
</html>

注意事项

如有必要，将 selector 参数替换为您的选择器表达式。如果您需要启用一个已经被禁用的元素的拖放功能，则可以使用 Droppable 插件提供的 enable() 方法，具体方式与 disable() 方法类似。