如何在knockout-sortable中完全禁用项（禁止作为拖放目标）

我之前也踩过类似的坑——用cancel选项只能禁止拖拽目标项，但还是能把其他项拖到它上面，根本达不到“完全禁用”的效果。后来研究了jQuery UI sortable和knockout-sortable的结合逻辑，终于找到了完美的解决方案：

核心思路：用items选项彻底排除禁用项 #

jQuery UI sortable的items选项可以指定哪些元素是可参与排序的核心对象——既作为拖拽源，也作为放置目标。如果我们把禁用项排除在这个选择器之外，就能实现真正的完全禁用：既不能拖它，也不能把别的项放到它上面。

具体实现步骤 #

1. 给禁用项标记专属CSS类
   在ViewModel里给每个项加一个布尔属性（比如isDisabled），用来控制禁用状态。然后在HTML中用css绑定动态添加禁用类，比如disabled-sort-item：

   <ul data-bind="sortable: { items: '> li:not(.disabled-sort-item)' }">
       <!-- ko foreach: items -->
       <li data-bind="text: name, css: { 'disabled-sort-item': isDisabled }"></li>
       <!-- /ko -->
   </ul>
   

2. 配置sortable的items选项
   在knockout-sortable的绑定参数里，设置items: "> li:not(.disabled-sort-item)"——这个选择器表示只把没有禁用类的li元素纳入排序系统，禁用项会被彻底排除在外。

3. 添加禁用样式（可选但推荐）
   给禁用类加个视觉样式，让用户一眼就能识别出这个项不可交互：

   .disabled-sort-item {
       background-color: #f0f0f0;
       cursor: not-allowed;
       color: #999;
   }
   

4. 处理动态禁用状态（如果需要）
   如果你的禁用状态是动态变化的（比如点击按钮切换禁用/启用），需要在状态变化时刷新sortable，让jQuery UI重新识别可排序项：

   function ItemViewModel(name, isDisabled) {
       this.name = ko.observable(name);
       this.isDisabled = ko.observable(isDisabled);
   
       // 订阅禁用状态变化，刷新sortable
       this.isDisabled.subscribe(function() {
           const $sortableList = $('ul[data-bind*="sortable"]');
           $sortableList.sortable('refresh');
       });
   }
   
   function MainViewModel() {
       this.items = ko.observableArray([
           new ItemViewModel("可排序项A", false),
           new ItemViewModel("完全禁用项", true),
           new ItemViewModel("可排序项B", false)
       ]);
   }
   
   ko.applyBindings(new MainViewModel());
   

为什么这个方案比cancel选项靠谱？ #

• cancel: ".disabled-sort-item"：只是禁止拖拽禁用项，但仍然允许把其他项拖到它的位置上，本质上只是“不可拖拽”，不是“完全禁用”。
• items: "> li:not(.disabled-sort-item)"：直接把禁用项排除在排序系统之外，既不能被拖拽，也不能作为放置目标，完全符合“禁用单个项”的需求。

内容的提问来源于stack exchange，提问作者Kevin UI