jQuery UI Sortable Widget classes 选项

jQuery UI Sortable 是一个非常常用的交互式小部件，它使用户可以在列表或表格中拖放项目，并且拖动时还会有美观的动画效果。为了实现这些交互式的特性，我们需要考虑使用到 Sortable 的 classes 选项。

Classes 选项

active

当某一项在拖放过程中被拖动而且鼠标指针拖动到另一个验证项目上时，这个效果被触发。默认为 ui-sortable-active。

.ui-sortable-active {
    background-color: #EEE;
    border: 1px solid #DDD;
    opacity: 0.5;
}

hover

鼠标悬停时，这个效果被触发。默认为 ui-sortable-hover。

.ui-sortable-hover {
    border: 1px solid #AAA;
    background-color: #EEE;
    cursor: pointer;
}

placeholder

排序是通过在列表之间插入占位符元素来实现的。这个 class 定义了占位符样式。默认为 ui-sortable-placeholder

.ui-sortable-placeholder {
    background-color: #CCC;
    visibility: visible !important;
}

helper

这个class定义了移动中的元素的样式。默认为 ui-sortable-helper。

.ui-sortable-helper {
    cursor: move;
    z-index: 9999;
    box-shadow: 0 0 10px #EEE;
}

handle

这个class定于了可以拖动列表的元素的样式。

.ui-sortable-handle {
    cursor: move;
}

结论

jQuery UI Sortable 是一个非常实用的交互式小部件，使用 classes选项可以让我们轻松地实现一些交互效果。以上展示的这些 classes 也仅仅是常用的几个，如果你想实现不同的样式，可以根据实际需求定义相应的 classes。