jQuery UI Droppable option() 方法

option() 方法用于获取或设置 Droppable 组件的选项。

语法

$(selector).droppable("option", optionName); // 获取选项值
$(selector).droppable("option", optionName, value); // 设置选项值
$(selector).droppable("option", obj); // 设置多个选项值

参数说明：

• selector: Selector 表示要应用 Droppable 组件的元素。
• optionName: String 表示要获取或设置的选项的名称。
• value: Any 表示要设置选项的值。
• obj: Object 表示要设置多个选项的键值对。

返回值

如果是获取选项值，则返回选项值；如果是设置选项值，则返回实现链以使调用者可以使用链式写法。

描述

option() 方法用于获取或设置 Droppable 组件的选项。可以一次设置多个选项。

示例

获取选项值

下面的代码演示了如何获取 Droppable 组件的选项值。

var disabled = $( "#droppable" ).droppable( "option", "disabled" );

设置选项值

下面的代码演示了如何设置 Droppable 组件的选项值。

$( "#draggable" ).draggable({
  revert: "invalid",
  start: function(event, ui){
    $( "#droppable" ).droppable("option", "disabled", false);
  },
  stop: function(event, ui){
    $( "#droppable" ).droppable("option", "disabled", true);
  }
});

设置多个选项值

下面的代码演示了如何一次设置多个 Droppable 组件的选项值。

$( "#droppable" ).droppable( "option", {
  disabled: true,
  drop: function(event, ui) {
    $( this )
    .addClass( "ui-state-highlight" )
    .find( "p" )
      .html( "Dropped!" );
  }
});

可用选项

下面列出了 Droppable 组件可用的选项。

| 选项名称 | 默认值 | 描述 | | -------- | ------ | ---- | | accept | * | 拖动元素的 jQuery 选择器。只有该元素匹配指定的选择器时才接受放置。 | | activeClass | "ui-droppable-active" | 拖放目标处于激活状态时应用于 CSS 类的名称。 | | addClasses | true | 当元素被拖动到放置目标上并且目标接受它时，添加 CSS 类。 | | greedy | false | 禁用嵌套放置目标。启用后，子孙放置目标将不再接受元素，只有顶级放置目标才接受元素。 | | hoverClass | "ui-droppable-hover" | 当拖动元素悬停在目标上时应用于 CSS 类的名称。 | | scope | "default" | 定义与拖动元素一起使用的范围。只有在两个项目都有相同的范围时，才接受元素。 | | tolerance | "intersect" | 定义放置位置。可选值 "fit"，"intersect" 或 "pointer"。 | | disabled | false | 禁用放置目标。 |

注意事项

• 在设置多个选项值时，所有选项都必须是对象属性，否则会引发错误。
• 可以在初始化组件时设置选项值，例如 $(selector).droppable({ option1: value1, option2: value2 });。