API 参考

这里是 sortable 的完整契约：你可以绑定、监听、投影和设置主题的一切，都集中在一处。接入你需要的部分，自定义你想要的样式——它是 standalone 的，且对 signal 友好。

输入

通过 13 个输入项精细调校 sortable。像绑定任意 Angular @Input 一样绑定它们。

名称	类型	默认值	描述
`hubSortable`必填	`T[] \| FormArray \| WritableSignal<T[]>`	—	绑定到可排序容器的数据：普通数组、响应式 `FormArray` 或可写信号。会与拖放操作保持同步。
`options`	`Options`	—	完整的 SortableJS 选项对象。每个 SortableJS 选项也可以作为独立的 input 直接绑定（例如 `handle`、`animation` 或 `group`）。
`autoUpdateArray`	`boolean`	`true`	为 `true`（默认）时，指令会在每次拖动后自动修改绑定的数组。设为 `false` 可手动控制并自行更新数组。
`cloneFunction`	`(item: T) => T`	—	当分组配置为 `pull: 'clone'` 模式时，用于克隆条目的工厂函数。
`container`	`string`	—	当宿主包裹实际列表时，应成为可排序的嵌套元素的 CSS 选择器。
`group`	`Options['group']`	—	用于连接多个列表并控制哪些列表可以给出或接收条目的分组名称或配置对象。
`sort`	`boolean`	—	启用或禁用列表内条目的重新排序。
`handle`	`string`	—	每个条目内启动拖动的元素的 CSS 选择器，其余部分仍可交互。
`draggable`	`string`	—	限制哪些子元素可被拖动的 CSS 选择器。
`filter`	`string \| ((event, target, sortable) => boolean)`	—	标记不可拖动元素的 CSS 选择器（或谓词函数）。
`disabled`	`boolean`	—	在不移除指令的情况下禁用可排序行为。
`animation`	`number`	—	重新排序动画的持续时间（毫秒）。
`ghostClass`	`string`	—	拖动时显示的占位符所应用的 CSS 类。

输出

响应 sortable 的行为——有 13 个事件可供你挂接逻辑。

名称	类型	描述
`init`	`Sortable`	在底层 SortableJS 实例创建后触发。
`start`	`SortableEvent`	在拖动操作开始时触发。
`end`	`SortableEvent`	无论结果如何，在拖动操作结束时触发。
`add`	`SortableEvent`	当条目从另一个列表被放入此列表时触发。
`update`	`SortableEvent`	当条目在同一列表内改变位置时触发。
`sortEvent`	`SortableEvent`	每当列表顺序改变时触发（在 `add` 或 `update` 之后）。
`remove`	`SortableEvent`	当条目离开此列表前往另一个列表时触发。
`filterEvent`	`SortableEvent`	当尝试拖动被过滤（不可拖动）的条目时触发。
`change`	`SortableEvent`	当列表因添加或移除操作而改变时触发。
`choose`	`SortableEvent`	当条目被选中（指针按下）时触发。
`unchoose`	`SortableEvent`	当条目未经拖动被释放时触发。
`clone`	`SortableEvent`	在克隆模式下克隆条目时触发。
`move`	`SortableMoveEventPayload`	拖动期间持续触发；其返回值可控制是否允许此次移动。

模板

尚未记录任何模板。

CSS 变量

尚未记录任何 CSS 变量。

样式与主题

尚未记录任何样式示例。本节将包含自定义方案和主题示例。