jQuery UI Droppable activeClass 选项介绍

概述

jQuery UI是一个基于jQuery的用户界面插件，其中包括了许多丰富的交互组件和UI效果。其中，Droppable插件是一个可接受可拖动元素的容器，activeClass选项是它的一个属性，用于指定在可拖动元素被拖动至容器上方时所应用的CSS类名。

用法

activeClass选项的用法非常简单，只需在初始化Droppable插件时指定其值即可：

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

以上示例代码指定了activeClass属性为"ui-state-active"，代表当可拖动元素被拖动至#droppable容器上方时，该容器将应用.ui-state-active CSS类名。

注意事项

• activeClass选项的值必须是一个有效的CSS类名，否则会被忽略。
• activeClass选项也可以在运行时进行修改，通过调用droppable方法并传入"option"参数来实现：

$("#droppable").droppable("option", "activeClass", "my-active-class");

以上示例代码将#droppable容器的activeClass选项修改为"my-active-class"。

• 如果不需要应用任何CSS类名，可以将activeClass选项设置为false，以取消应用任何类名：

$("#droppable").droppable({
  activeClass: false
});

总结

activeClass选项是Droppable插件的一个属性，用于指定在拖动状态下所应用的CSS类名。通过这个属性，可以实现更加个性化的效果，提升用户体验。