jQuery UI Droppable 接受选项

jQuery UI Droppable 是 jQuery UI 库中的一个模块，它允许您创建可拖放的 UI 元素，并允许您将它们放置在特定的接收者区域中。您可以使用接受选项来规定一个或多个允许放置设定的选择器。

接受选项语法

jQuery UI Droppable 接受选项是一个包含一个或多个接受选择器的对象，如下所示：

$( ".droppable" ).droppable({
  accept: "#draggable1, #draggable2"
});

您可以在 accept 选项中使用标准的 CSS 选择器，以指定一个或多个可接受的拖放元素。例如，上面的示例将允许名为 "draggable1" 和 "draggable2" 的元素被放置在具有类名为 "droppable" 的元素上。

多个选择器

您可以在 accept 选项中添加多个选择器，用逗号分隔。例如，下面的示例将允许名为 "draggable1" 或 "draggable2" 的元素被放置在具有类名为 "droppable" 或 "droppable2" 的元素上。

$( ".droppable, .droppable2" ).droppable({
  accept: "#draggable1, #draggable2"
});

函数接受

您还可以使用一个函数来返回一个布尔值，以决定是否接受将要被放置的拖动元素。例如，下面的示例将允许将一个名为 "draggable" 的元素拖动到一个具有类名为 "droppable" 的元素中，仅当一个名为 "draggable" 的元素还没有被放置在该元素上时。

$( ".droppable" ).droppable({
  accept: function(draggable) {
    if ($(".droppable").has(draggable).length) {
      return false;
    } else {
      return true;
    }
  }
});

在上面的代码片段中，accept 函数将接收一个参数 draggable，它是将要被放置的拖动元素对应的 jQuery 对象。函数返回 true 或 false 来决定是否接受该拖动元素。如果类名为 "droppable" 的元素中已经存在该元素，则返回 false；否则返回 true。

结论

通过 accept 选项，您可以定义哪些元素可以被放置在您的接收者元素上。您可以使用选择器来指定接受的元素，也可以使用一个函数来自定义接受规则。