SortableJS中draggable属性导致索引计算异常的解决方案

问题背景

在使用SortableJS进行表格拖拽排序时，开发者可能会遇到一个常见问题：当表格包含<thead>等不可拖拽元素时，onEnd事件返回的索引值与实际预期不符。这是由于SortableJS在计算元素位置时，没有正确考虑draggable属性的影响。

问题现象

具体表现为：

1. 在包含非拖拽元素的容器中（如带有<thead>的表格）
2. 拖拽操作完成后，onEnd事件返回的oldIndex和newIndex会包含所有子元素计数
3. 但实际上只有具有draggable属性的元素才应该参与计数

技术原理分析

SortableJS默认情况下会计算容器中的所有子元素来确定位置索引。当某些元素被标记为不可拖拽（如通过CSS类draggable）时，库的内部计数机制仍然会将这些元素计入总数，导致返回的索引值比实际可拖拽元素的位置大。

解决方案

SortableJS实际上已经提供了专门的属性来解决这个问题：

onEnd: function(evt) {
    // 使用这两个属性获取正确的索引
    const oldIndex = evt.oldDraggableIndex;
    const newIndex = evt.newDraggableIndex;
    // ...其他处理逻辑
}

这两个属性oldDraggableIndex和newDraggableIndex专门用于只计算可拖拽元素的位置索引，完美解决了包含非拖拽元素时的计数问题。

最佳实践建议

1. 当容器中包含非拖拽元素时，始终使用*DraggableIndex系列属性
2. 明确设置哪些元素可拖拽，通过CSS类或属性
3. 在复杂结构中，考虑使用filter选项进一步控制可拖拽元素
4. 对于表格等特殊结构，确保<tbody>中的行是可拖拽的，而<thead>保持不可拖拽

总结

SortableJS的这一设计实际上提供了灵活性，让开发者可以根据需要选择是否包含非拖拽元素在索引计算中。理解这一机制后，开发者可以更精确地控制拖拽行为，特别是在处理复杂DOM结构时。通过使用正确的索引属性，可以避免手动计算和调整索引的麻烦，使代码更加简洁可靠。