sortable.js 相关

使用 sortable.js 时, 固定列表顶部和底部(不能修改顺序)

原理

1. 先设置顶部和底部的选项不可被拖动(通过 sortable.create 的参数 handle, filter 实现), 并记录中间可移动区域的 index 范围(上限, 下限)
2. 利用 sortable 配置的 onEnd 函数和 sortable 实例的 toArray 方法, 暂存移动前的顺序
3. 移动完成后, 若发现被移动项新位置超出了允许移动区域, 则使用 sortable 实例的 sort 方法, 传入移动前顺序数组, 按移动前顺序重新排列

代码

endFunc(e) { // onEnd: endFunc
    if (e.newIndex !== e.oldIndex) { // 发生了移动
        let sortedArr = this.sortInstance.toArray(); // sortable 实例 toArray 方法, 导出顺序数组(移动后的顺序)
        sortedArr.splice(e.oldIndex, 0, ...sortedArr.splice(e.newIndex, 1)); // 按旧顺序重组顺序数组
        if (e.newIndex >= this.boundEnd) { // 移动到底部 "不可移动选项" 之下         
            this.sortInstance.sort(sortedArr); // 按旧顺序重新排列
        } else {
            this.list_options.splice(e.newIndex, 0, ...this.list_options.splice(e.oldIndex, 1)); // 否则, 不管 sortable 实例, 将需要排序的数据(如果没有就不管)按新顺序排序
        }
    }
}