How to swap 2 section with vuedraggable-CodePudding

Hi i'm able to swap or order within a section very easily

But i'm failing to swap between 2 sections i,e from leftSection to rightSection as shown in image

Here is full code

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

within leftSection i'm doing like this

      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" >
            {{ section.Name }}
          </div>
    </draggable>

in similar way i'm doing for within rightSection but don't know how to swap between 2 sections.

please help me thanks in advance..!!!

CodePudding user response：

use a single object and dynamically output it to a component It might look something like this:

    <div >
      <draggable v-model="sections" group="sections">
        <div
         v-for="(item, index) of sections"
         :key="index"
         
        >
          <draggable
            v-model="sections[index].fields"
            group="{name: 'fields-'   index}"
          >
            <div
              v-for="(section, index) in item.fields"
              :key="index"
              
            >
              {{ section.Name }}
            </div>
          </draggable>
        </div>
      </draggable>
    </div>
<div >
  <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,
    },
  ],
  ...

Code template: sandbox link

However, one point should be taken into account. Since both columns are wrapped in a common draggable, elements can be moved between columns.