sortable排序混乱

根据提供的引用内容，sortable排序混乱可能是由以下几个原因导致的：
1. 变量污染：可能是其他地方的index与当前的index冲突了，需要检查变量名是否有重复。
2. 数据层问题：可以尝试使用不同的变量绑定，并使用watch、compute等关联，以及深浅拷贝对象来检查数据层是否有问题。
3. Sortable源码问题：可以检查Sortable源码是否有问题，或者使用配置某个字段是否有问题，逐个配置字段修改尝试。
4. 数据格式问题：可以检查数据格式是否正确，重新绑定key值。
5. 绑定下标问题：在封装组件中，绑定数组下标不会出现问题，但在有其他列表渲染情况下，绑定下标可能会出现错误。可以在list中的对象中添加一个唯一id绑定来解决这个问题。
6. vdom和真实dom(更新)绑定问题：可能是vdom和真实dom(更新)绑定有问题，需要检查patch方法是否有问题。

相关问题

sortable排序

在使用sortable.js进行排序时，页面元素会重新排序，但实际的数组数据并没有进行排序，仍然保持原来的顺序。如果在排序过程中同时修改了数组，会导致排序结果混乱。为了在提交时得到排序后的新数组，可以按照id的顺序对原数组进行排序。可以按照以下步骤进行操作：
1. 首先引入sortable.js，并在节点渲染完毕后添加以下JS代码：

let body = document.getElementById('formAdd');
var sortable = Sortable.create(body);
var order = sortable.toArray();
console.log(order); //[3,2,1]

2. 在提交时，根据id的顺序给原数组排序，得到排序后的新数组。可以使用以下代码实现：

let arrvideo = {};
this.videoList.map((item) => {
   let index = this.videoListarr.indexOf(item.lessonNumberId);
   arrvideo[index = item;
});

这样就可以得到根据id顺序排列的新数组arrvideo。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [sortable的sort方法对表单等任意节点进行排序](https://blog.csdn.net/ckq_1104/article/details/88054805)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
- *2* *3* [sortable 拖拽排序，获取排序后的数据](https://blog.csdn.net/samll_redhat/article/details/122319327)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]

使用sortable跨行拖拽的时候中间单元自动上调导致排序混乱怎么解决

在使用 Sortable 进行跨行拖拽排序时，中间单元格自动上调可能会导致排序混乱。一种解决方法是使用 Sortable 的 `swapThreshold` 选项来控制拖拽时自动上调的距离，以及使用 `onEnd` 回调函数来手动调整排序。

具体实现步骤如下：

1. 设置 `swapThreshold` 选项为一个较大的数值，比如 100，这样在拖拽时自动上调的距离就会变得很大，减少了自动上调的可能性。

Sortable.create(list, {
  swapThreshold: 100, // 设置自动上调距离为 100 像素
  ...
});

2. 在 `onEnd` 回调函数中，手动调整排序，将拖拽的元素插入到目标位置之前或之后，避免自动上调带来的混乱。

Sortable.create(list, {
  swapThreshold: 100,
  onEnd: function (evt) {
    var itemEl = evt.item; // 拖拽的元素
    var toEl = evt.to; // 目标容器
    var newIndex = evt.newIndex; // 目标位置的索引

    // 手动调整排序，将拖拽的元素插入到目标位置之前或之后
    if (evt.oldIndex < newIndex) {
      toEl.insertBefore(itemEl, toEl.children[newIndex + 1]);
    } else {
      toEl.insertBefore(itemEl, toEl.children[newIndex]);
    }
  },
  ...
});

这样，在使用 Sortable 进行跨行拖拽排序时，就可以避免中间单元格自动上调导致的排序混乱了。