jQuery UI Sortable Widget classes 选项

简介

jQuery UI Sortable 是一个可以实现列表排序组件的插件，它可以帮助开发者快速实现元素可排序的功能。该插件提供了多种配置和选项，其中 classes 选项可以帮助开发者控制插件所生成的 HTML 元素的类名称，可以用来重写默认样式或者添加自定义样式。

classes 选项

classes 选项是一个对象类型的参数，用于设置插件所生成的 HTML 元素的类名称。

$( ".sortable" ).sortable({
  classes: {
    "ui-sortable": "custom-sortable",
    "ui-sortable-handle": "custom-handle",
    "ui-sortable-placeholder": "custom-placeholder"
  }
});

该选项包含三个属性：

• ui-sortable：Sortable 组件的包裹元素，默认为 ui-sortable。
• ui-sortable-handle：Sortable 组件中用于拖动元素的句柄元素，默认为 ui-sortable-handle。
• ui-sortable-placeholder：Sortable 组件中用于占位的元素，默认为 ui-sortable-placeholder。

可以在该对象中添加自定义的类名称，用于重写默认样式或者添加自定义样式。

例如：

.custom-sortable {
  background-color: #f5f5f5;
}

.custom-handle {
  cursor: move;
  background-color: #999;
  color: #fff;
  padding: 4px 8px;
}

.custom-placeholder {
  background-color: #eee;
  border: 1px dashed #ccc;
}

总结

classes 选项在实现自定义样式方面提供了灵活性，开发者可以通过简单的配置来自定义元素的类名称，以实现不同的样式效果。同时，它也是 jQuery UI Sortable 组件非常重要的一个选项之一，它可以帮助开发者更好地控制组件的样式和行为。