如何用 vuedraggable 交换 2 部分

Question

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

但我无法在 2 个部分之间切换，即从 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 中以类似的方式进行操作，但不知道如何在 2 个部分之间切换。

请帮助我提前谢谢..!!!

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,
    },
  ],
  ...

代码模板：sandbox link

但是，应该考虑到一点。由于两列都包含在一个公共的可拖动对象中，因此可以在列之间移动元素。

如何用 vuedraggable 交换 2 部分

How to swap 2 section with vuedraggable

vue.js

sortablejs

vuedraggable