jQuery UI Droppable classes选项

jQuery UI Droppable类是一个可拖拽的组件，允许您创建可接受拖放操作的区域。Droppable类有许多选项，其中一个是“classes”，它允许您指定一个或多个类名，这些类名会被应用于不同的Droppable事件。以下是如何使用“classes”选项来自定义Droppable组件的样式。

1. 基本用法

要设置Droppable的一组自定义类名，可以使用“classes”属性。示例代码如下：

$( ".dropzone" ).droppable({
  classes: {
    "ui-droppable-hover": "custom-hover",
    "ui-droppable-active": "custom-active"
  }
});

在上面的示例中，我们将Droppable类的默认hover和active类名分别映射到我们自定义的“custom-hover”和“custom-active”类名。这将使得当用户将拖拽对象拖动到这个区域时，会出现我们自定义的样式。

2. 带有回调函数的用法

除了静态的样式设置，您还可以使用JQuery回调函数中的“ui-state-*”类名来进一步自定义Droppable类的行为。以下是一个例子：

$( ".dropzone" ).droppable({
  classes: {
    "ui-droppable-hover": "custom-hover",
    "ui-droppable-active": "custom-active"
  },
  drop: function( event, ui ) {
    $(this).addClass("ui-state-success");
    $(this).removeClass("ui-state-default");
  },
  out: function( event, ui ) {
    $(this).removeClass("ui-state-success");
    $(this).addClass("ui-state-default");
  }
});

在上面的代码中，我们使用“drop”和“out”回调函数来设置“ui-state-success”和“ui-state-default”类名。这些类名在用户拖放对象时会自动添加和移除。这样可以使得使用我们自定义的样式来显示成功或失败状态。

以上是关于jQuery UI Droppable类中“classes”选项的完整攻略。其中，我们提供了基本的用法和带有回调函数的用法来展示如何自定义Droppable组件的样式。