jQuery UI Sortable 组件：items与cancel选项的精细控制
项目地址: https://gitcode.com/gh_mirrors/jq/jquery-ui 概述
在 jQuery UI 的 Sortable 交互组件中，开发者经常需要精确控制哪些元素可以被排序，哪些元素应该保持固定。本文将通过一个典型示例，深入解析如何利用 items 和 cancel 两个关键选项来实现不同的排序控制策略。
核心概念解析
items 选项
items 选项通过 CSS 选择器指定哪些子元素可以参与排序。不在选择器范围内的元素将：
- 不能被拖动排序
- 不能作为其他可排序元素的放置目标
- 完全从排序逻辑中排除
cancel 选项
cancel 选项同样通过 CSS 选择器指定元素，但行为有所不同：
- 被取消的元素不能被拖动排序
- 但仍可作为其他可排序元素的放置目标
- 保留了部分交互能力
实际应用示例
示例1：完全排除特定元素
$("#sortable1").sortable({
items: "li:not(.ui-state-disabled)"
});
此配置中：
- 只有不包含
ui-state-disabled类的<li>元素可排序 - 禁用状态的元素既不能拖动，也不能接收其他元素
- 适用于需要完全锁定某些项目的情况
示例2：仅取消拖动但保留放置功能
$("#sortable2").sortable({
cancel: ".ui-state-disabled"
});
此配置中：
- 禁用状态的元素不能被拖动
- 但这些元素仍可作为其他元素的放置目标
- 适用于需要固定某些项目但仍允许在其周围排序的场景
视觉与交互设计
在示例中，通过 ui-state-disabled 类实现了视觉上的区分：
- 默认项目使用标准样式
- 禁用项目有特殊外观，向用户明确其不可拖动状态
- 通过
disableSelection()方法防止文本被意外选中，提升交互体验
最佳实践建议
- 明确视觉反馈：对于不可排序的项目，应该提供清晰的视觉区分
- 合理选择策略：
- 需要完全排除时使用
items - 只需阻止拖动但保留放置功能时使用
cancel
- 需要完全排除时使用
- 移动端适配：确保禁用状态在触摸设备上也有良好的表现
- 辅助功能：考虑为屏幕阅读器用户提供适当的 ARIA 属性
常见问题解答
Q：items 和 cancel 可以同时使用吗？ A：技术上可以，但通常不需要。根据需求选择一种方式即可。
Q：如何动态改变可排序状态？ A：可以通过修改元素的类名，然后调用 refresh 方法更新 Sortable 实例。
Q：禁用项目会影响排序事件吗？ A：是的，被完全排除的项目不会触发任何排序相关事件。
通过深入理解这两个选项的区别和应用场景，开发者可以更精细地控制 jQuery UI Sortable 组件的交互行为，创建出更符合业务需求的排序界面。
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
扫一扫
6571
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
