Drag & drop between different zone.

[lucasjulian]

Hi, I try to make a vuejs application with Element.io & Vue.draggable.

I would like to creat a list. With sortable element (groups) within list of layouts inside.

I would like to have the possibility to grad and drop layouts inside a group and also move layouts between groups.

See how I organized my data. Is it wrong ?

const state = {
  groups: [
    {
      id: 0,
      name: "default",
      layouts: [
        {
          id: 1,
          title: "iPad 4 Mini",
          category: "default",
          dateCreation: 1542464054130,
          dateUpdate: 1542464054130,
          use: true
        },
        {
          id: 2,
          title: "iPad 888",
          category: "default",
          dateCreation: 1542464054130,
          dateUpdate: 1542464054130,
          use: true
        }
      ]
    },
    {
      id: 1,
      name: "designer group",
      layouts: [
        {
          id: 5,
          title: "iPad 4 Mini",
          category: "default",
          dateCreation: 1542464054130,
          dateUpdate: 1542464054130,
          use: true
        },
        {
          id: 9,
          title: "iPad 888",
          category: "default",
          dateCreation: 1542464054130,
          dateUpdate: 1542464054130,
          use: true
        }
      ]
    }
  ]
}

<div class="listContainer">
  <el-collapse>
    <draggable v-model="groups.layouts">
      <transition-group>
        <el-collapse-item  class="itemGroup" v-for="group in groups" :name="group.id" :key="group.id">
      <div slot="title" class="titleGroup">
        <svgicon icon="icoArrow" width="6" height="14"></svgicon>
          {{group.name}}
      </div>
    <draggable v-model="groups.layouts">
      <transition-group>
        <div class="item" v-for="layout in group.layouts" :key="layout.id">
          <div class="innerItem">
            <input type="text" class="title" :value="layout.title">
          <p class="update">Last update {{layout.dateUpdate | moment("dddd, MMMM Do YYYY, h:mm:ss a") }}</p>
          </div>
          <button class="iconSync">
         <svgicon icon="icoSync" width="18" height="25"></svgicon>
          </button>
    </div>
      </transition-group>
   </draggable>
</el-collapse-item>
</transition-group>
</draggable>
</el-collapse>
</div>

For the moment I just can re-order groups with each other, same thing for layouts.

Any help will be appreciate ^^

[David-Desmaisons]

Could you create a jsfiddle?

[lucasjulian]

Of course but can I use Vuex in a jsFiddle ? (beacause I forget to mentionned that my const state is used with Vuex.

[David-Desmaisons]

@lucasjulian see issue #363 . This is not a scenario covered by vue.draggable.