jQuery UI Droppable widget() 方法

介绍

jQuery UI Droppable 是一个拖放插件，允许用户将 DOM 元素拖放到其他元素上，并触发相应的事件。Droppable 可以通过设置选项来自定义它的行为和外观。

使用方法

引入文件

首先需要在 HTML 页面中引入必要的文件：

<!-- 引入 jQuery 库 -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<!-- 引入 jQuery UI 库 -->
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

创建 Droppable

在 HTML 中创建一个可接受拖放元素的区域，如下所示：

<div id="droppable"></div>

在 JavaScript 中使用 jQuery UI Droppable 创建 Droppable：

$( function() {
  $( "#droppable" ).droppable({
    drop: function( event, ui ) {
      // 当拖放元素被放置在 Droppable 上时触发的事件
    }
  });
});

上面代码中的 drop 选项指定了一个函数，用于处理拖放元素被放置在 Droppable 上时的事件。

Options

Droppable 有多种选项可以用于自定义它的行为和外观，下面列举了一些常用选项。

accept

这个选项指定了哪些元素可以被拖放到 Droppable 上。它可以是以下任意一种形式：

• CSS 选择器
• DOM 元素
• jQuery 对象
• 一个函数，接收两个参数： dragging(拖放元素) 和 droppable(目标 Droppable)， 返回 true 或 false

样例代码：

$( function() {
  $( "#droppable" ).droppable({
    accept: "#draggable" // 只有 ID 为 "draggable" 的元素可以被拖放到 Droppable 上
  });
});

activeClass

指定了 Droppable 被激活时添加的类。默认值是 ui-droppable-active。

样例代码：

$( function() {
  $( "#droppable" ).droppable({
    activeClass: "droppable-active" // 当 Droppable 被激活时添加的类是 "droppable-active"
  });
});

hoverClass

指定了鼠标悬停在 Droppable 上时添加的类。默认值是 ui-droppable-hover。

样例代码：

$( function() {
  $( "#droppable" ).droppable({
    hoverClass: "droppable-hover" // 当鼠标悬停在 Droppable 上时添加的类是 "droppable-hover"
  });
});

tolerance

指定了拖放元素与 Droppable 的重叠区域如何计算。可选值包括：

• intersect（默认值）：只有当拖放元素与 Droppable 重叠时才触发 drop 事件。
• fit：只有当拖放元素完全位于 Droppable 内部时才触发 drop 事件。
• pointer：只有当鼠标指针完全位于 Droppable 内部时才触发 drop 事件。
• touch：只有当拖放元素和 Droppable 的任意一侧接触时才触发 drop 事件。

样例代码：

$( function() {
  $( "#droppable" ).droppable({
    tolerance: "fit" // 当拖放元素完全位于 Droppable 内部时才触发 drop 事件
  });
});

Events

除了上面提到过的 drop 事件之外，Droppable 还支持其他一些事件，如下所示：

activate

当 Droppable 被激活后触发，也即当前拖放元素开始移动时。

deactivate

当 Droppable 被取消激活或者拖放结束后触发。

over

当拖放元素开始悬停在 Droppable 上时触发。

out

当拖放元素移出 Droppable 时触发。

样例代码：

$( function() {
  $( "#droppable" ).droppable({
    activate: function( event, ui ) {
      // 当 Droppable 被激活时触发的事件
    },
    deactivate: function( event, ui ) {
      // 当 Droppable 被取消激活或者拖放结束时触发的事件
    },
    over: function( event, ui ) {
      // 当拖放元素开始悬停在 Droppable 上时触发的事件
    },
    out: function( event, ui ) {
      // 当拖放元素移出 Droppable 时触发的事件
    }
  });
});

总结

jQuery UI Droppable 是一款方便易用的拖放插件，可以轻松实现将元素拖放到其他元素中，标准化的接口和简单的选项使得 Droppable 成为了一款非常实用的工具。