使用sortableJs，实现嵌套拖拽排序，外层拖拽后后，内部再拖拽时，外层的索引还是之前的索引？

  • Z时代
  • 2024-03-10
  • 分类：IT

使用sortableJs，实现嵌套拖拽排序，外层拖拽后后，内部再拖拽时，外层的索引还是之前的索引？

题目描述

在Vue项目中，实现嵌套拖拽排序功能，外层拖拽后，内部获取的索引值不是最新的。

题目来源及自己的思路

相关代码 粘贴代码文本（请勿用截图）

下方为外层的可拖拽结构

  <div class="table_box marTop"
          v-for="(item, index) in List"
          :key="item.id"
        >
          <div class="titname">
            <div class="leftname">
              <h3>{{ item.name }}</h3>
                <span style="color: red; font-size: 14px; margin-left: 20px"
                  >(下方表格支持拖动排序)</span
                >
              </div>
            </div>
          </div>

下方表格为内部可拖拽结构，使用element 表格布局

          <el-table :data="item.data" row-key="id" border stripe>
            <el-table-column
              type="index"
              label="前端排序"
              :width="80"
              align="center"
            >
            </el-table-column>
            <el-table-column label="内容标题" :width="500" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row._targetInfo.title }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>

1、js部分

methods: {
    drag1() {
      // 内容的排序
      let el = document.querySelectorAll(
        ".el-table__body-wrapper > table > tbody"
      );
      console.log(el);
      for (let i = 0; i < el.length; i++) {
        Sortable.create(el[i], {
          fallbackOnBody: true,
          disabled: false, // 拖拽不可用? false 启用
          ghostClass: "sortable-ghost", //拖拽样式
          animation: 150, // 拖拽延时，效果更好看
          onEnd: (e) => {
            console.log(e, i);
            // 拖拽结束时的触发
            let item1 = this.List[i].data.splice(e.oldIndex, 1);
            this.List[i].data.splice(e.newIndex, 0, item1[0]); // 数据处理，获取最新的表格数据
}
    },
    drag2() {
      // 板块的排序
      let tabbox = document.querySelector(".bigBox");
      Sortable.create(tabbox, {
        disabled: false, // 拖拽不可用? false 启用
        ghostClass: "sortable-ghost", //拖拽样式
        animation: 150, // 拖拽延时，效果更好看
        onEnd: (e) => {
          console.log(e);
          // 拖拽结束时的触发
          let arr = this.List; // 获取表数据
          let item1 = arr.splice(e.oldIndex, 1);
          arr.splice(e.newIndex, 0, item1[0]); // 数据处理，获取最新的表格数据
        },
      });
    },

你期待的结果是什么？实际看到的错误信息又是什么？

当外层拖拽完成后，再去拖拽其内部的表格，打印结果不对。
比如，当前索引[1,2,3,4],拖拽完成后顺序为[2,1,3,4], drag1中打印i为[2,1,3,4],
正常拖拽完成后的索引应该还是[1,2,3,4],

尝试过在外层拖拽完成后Vue页面加载后，再次执行drag1，结果依旧。

以上是 使用sortableJs，实现嵌套拖拽排序，外层拖拽后后，内部再拖拽时，外层的索引还是之前的索引？ 的全部内容， 来源链接： utcz.com/p/937190.html

回到顶部