如何用vuedraggable交换2节

Question

嗨，我可以很容易地在一个区域内交换或订购

但是我没有把i，e部分从leftSection切换到rightSection，如图所示

​

​

这是完整的代码

https://codesandbox.io/s/peaceful-almeida-mbw2m?file=/src/App.vue

在leftSection里，我是这样做的

      leftSection: [
        { Name: "L - A", order: 1 },
        { Name: "L - B", order: 2 },
        { Name: "L - C", order: 3 },
      ]

  <draggable
          v-model="leftSection"
          group="section"
          @start="drag = true"
          @end="drag = false"
        >
          <div v-for="section in leftSection" :key="section.Name" class="card">
            {{ section.Name }}
          </div>
    </draggable>

类似地，我在rightSection中也是这样做的，但不知道如何在两个部分之间进行交换。

请提前帮助我谢谢！

Answer 1

使用单个对象并将其动态输出到组件，它可能如下所示：

    <div class="section-wrapper">
      <draggable v-model="sections" group="sections">
        <div
         v-for="(item, index) of sections"
         :key="index"
         class="section-column"
        >
          <draggable
            v-model="sections[index].fields"
            group="{name: 'fields-' + index}"
          >
            <div
              v-for="(section, index) in item.fields"
              :key="index"
              class="card"
            >
              {{ section.Name }}
            </div>
          </draggable>
        </div>
      </draggable>
    </div>
<div class="display-section">
  <div v-for="left in sections[0].fields" :key="left.Name">
    {{ left.Name }}
  </div>
  <hr />
  <div v-for="right in sections[1].fields" :key="right.Name">
    {{ right.Name }}
  </div>
</div>

...
      sections: [
    {
      fields: [
        { Name: "L - A", order: 1 },
        { Name: "L - B", order: 2 },
        { Name: "L - C", order: 3 },
      ],
      order: 1,
    },
    {
      fields: [
        { Name: "R - A", order: 1 },
        { Name: "R - B", order: 2 },
      ],
      order: 2,
    },
  ],
  ...

代码模板：沙箱连接

然而，有一点应当加以考虑。由于这两列都包装在一个通用的可拖式中，所以元素可以在列之间移动。