jQuery UI的Droppable option()方法

jQuery UI的Droppable option()方法可以用来设置可拖拽目标元素的参数。本文将会详细讲解option()方法的用法，并提供两个示例说明。

语法

$( ".selector" ).droppable('option', propertyName [, value ] );

• .selector: 可以是一个或多个元素的 jQuery 选择器，代表需要设置参数的可拖拽元素。
• propertyName: 代表可拖拽元素的选项名，它是一个字符串类型的值。
• value: 如果设置了该参数，则表示将 propertyName 指定的选项的值设置为 value，否则表示获取 propertyName 指定的选项的值。

参数

以下是常见的选项参数：

Option	Type	Default	Description
accept	Selector	*	允许拖拽操作传入的元素
activeClass	String	ui-state-active	被拖拽时，目标元素添加的样式类名
greedy	Boolean	false	设置为 true 时，子元素不会接受拖拽元素
hoverClass	String	ui-state-hover	光标悬停在目标元素上时添加的样式类名
tolerance	String	intersect	指定何时放置拖拽元素

示例

示例一: 更改activeClass

在这个示例中，我们将更改可拖拽元素的 activeClass, 使其在被拖拽时添加 ui-state-dragging 样式类名。

$( "#droppable" ).droppable({
    activeClass: "ui-state-dragging"
});

示例二: 更改accept

在这个示例中，我们将更改可拖拽元素可接受的元素的选择器（accept）。 只有添加了 ui-widget-header 样式类名的元素才能被拖拽进入目标容器。

$( "#droppable" ).droppable({
    accept: ".ui-widget-header"
});

以上就是 jQuery UI droppable option() 方法 的完整攻略。希望本文对您有所帮助。