Multiple draggable instance with future indexes support (#19)

* feat: handle future index for multiple draggable instance

README.md

@@ -61,9 +61,7 @@ yarn add vue-draggable-next
 ```html
 <draggable v-model="myArray">
   <transition-group>
-    <div v-for="element in myArray" :key="element.id">
-      {{element.name}}
-    </div>
+    <div v-for="element in myArray" :key="element.id">{{element.name}}</div>
   </transition-group>
 </draggable>
 ```
@@ -167,7 +165,7 @@ Required: `false`<br>
 Default: `(original) => { return original;}`<br>
 
 Function called on the source component to clone element when clone option is true. The unique argument is the viewModel element to be cloned and the returned value is its cloned version.<br>
-By default vue.draggable reuses the viewModel element, so you have to use this hook if you want to clone or deep clone it.
+By default vue-draggable-next reuses the viewModel element, so you have to use this hook if you want to clone or deep clone it.
 
 #### move
 
@@ -243,7 +241,7 @@ HTML:
 
 ## 🌸 Thanks
 
-This project is heavily inspired by the following awesome projects.
+This project is heavily inspired by the following awesome vue 2 projects.
 
 - [SortableJS/Vue.Draggable](https://github.com/SortableJS/Vue.Draggable)
 

demo/App.vue

@@ -9,20 +9,20 @@
       vue-draggable-next
     </div>
     <div class="flex justify-center">
-      <div
+      <router-link
         v-for="tab in tabs"
         :key="tab"
         class="bg-gray-200 p-4 cursor-pointer border hover:bg-gray-300"
-        @click="activeTab = tab.component"
-        :class="{ 'bg-gray-400': activeTab === tab.component }"
+        :to="{ name: tab.path }"
       >
         {{ tab.name }}
-      </div>
+      </router-link>
     </div>
     <div class="mx-10 my-10 shadow-xl p-5 component-container">
-      <div v-for="(tab, index) of tabs" :key="index">
+      <!-- <div v-for="(tab, index) of tabs" :key="index">
         <component :is="tab.component" v-if="tab.component === activeTab" />
-      </div>
+      </div> -->
+      <router-view></router-view>
     </div>
   </div>
 </template>
@@ -31,13 +31,18 @@
 import { defineComponent, defineAsyncComponent, ref } from 'vue'
 
 const tabs = [
-  { name: 'Simple', component: 'basic' },
-  { name: 'Clone', component: 'clone' },
-  { name: 'Transition Group', component: 'transition-group' },
-  { name: 'Nested', component: 'nested-component' },
-  { name: 'Vuex', component: 'vuex-component' },
-  { name: 'V-Model', component: 'v-model-component' },
+  { path: 'basic', name: 'Simple', component: 'basic' },
+  { path: 'clone', name: 'Clone', component: 'clone' },
   {
+    path: 'transition',
+    name: 'Transition Group',
+    component: 'transition-group',
+  },
+  { path: 'nested', name: 'Nested', component: 'nested-component' },
+  { path: 'vuex', name: 'Vuex', component: 'vuex-component' },
+  { path: 'vmode', name: 'V-Model', component: 'v-model-component' },
+  {
+    path: 'third-party',
     name: 'Third Party',
     component: 'third-party',
   },
@@ -66,4 +71,7 @@ export default defineComponent({
 .component-container {
   min-height: 600px;
 }
+.router-link-active {
+  @apply bg-gray-400 !important;
+}
 </style>

demo/components/basic.vue

@@ -24,7 +24,7 @@
 <script lang="ts">
 import { defineComponent, reactive } from 'vue'
 // @ts-ignore
-import { VueDraggableNext } from '/@/'
+import { VueDraggableNext } from '/@'
 import rawDisplays from './rawDisplay.vue'
 export default defineComponent({
   components: {

demo/components/clone.vue

@@ -6,7 +6,7 @@
           class="dragArea list-group w-full"
           :list="list1"
           :group="{ name: 'people', pull: 'clone', put: false }"
-          :sort="false"
+          :sort="true"
           @change="log"
           :move="checkMove"
         >
@@ -81,7 +81,8 @@ export default defineComponent({
       console.log('replace')
     },
     checkMove(event) {
-      console.log('checkMove', event)
+      console.log('checkMove', event.draggedContext)
+      console.log('Future index: ' + event.draggedContext.futureIndex)
     },
     log(event) {
       const { moved, added } = event

demo/components/futureIndex.vue

@@ -0,0 +1,127 @@
+<template>
+  <div class="flex justify-center">
+    <div class="w-64">
+      <h1>Instance 1</h1>
+      <!-- list #1 -->
+      <draggable
+        class="dragArea list-group w-full"
+        group="sortable-list-items"
+        v-model="state.list[0]"
+        :data-section="0"
+        :sort="true"
+        :move="onMove"
+        @change="onChange"
+      >
+        <div
+          class="list-group-item bg-gray-300 m-1 p-3 rounded-md text-center cursor-pointer"
+          v-for="element in state.list[0]"
+          :key="element.name"
+        >
+          {{ element.name }}
+        </div>
+      </draggable>
+      <h1>Instance 2</h1>
+
+      <!-- list #2 -->
+      <draggable
+        class="dragArea list-group w-full"
+        group="sortable-list-items"
+        v-model="state.list[1]"
+        :data-section="1"
+        :sort="true"
+        :move="onMove"
+        @change="onChange"
+      >
+        <div
+          class="list-group-item bg-gray-300 m-1 p-3 rounded-md text-center cursor-pointer"
+          v-for="element in state.list[1]"
+          :key="element.name"
+        >
+          {{ element.name }}
+        </div>
+      </draggable>
+      <h1>Instance 3</h1>
+
+      <!-- list #3 -->
+      <draggable
+        class="dragArea list-group w-full"
+        group="sortable-list-items"
+        v-model="state.list[2]"
+        :data-section="2"
+        :sort="true"
+        :move="onMove"
+        @change="onChange"
+      >
+        <div
+          class="list-group-item bg-gray-300 m-1 p-3 rounded-md text-center cursor-pointer"
+          v-for="element in state.list[2]"
+          :key="element.name"
+        >
+          {{ element.name }}
+        </div>
+      </draggable>
+    </div>
+    <!-- display lists -->
+    <div class="raw-displays">
+      <rawDisplays class="w-64" :value="state.list[0]" />
+      <rawDisplays class="w-64" :value="state.list[1]" />
+      <rawDisplays class="w-64" :value="state.list[2]" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, reactive } from 'vue'
+// @ts-ignore
+import { VueDraggableNext } from '/@'
+import rawDisplays from './rawDisplay.vue'
+export default defineComponent({
+  components: {
+    draggable: VueDraggableNext,
+    rawDisplays,
+  },
+  setup() {
+    const state = reactive({
+      list: [
+        [
+          { name: 'John', id: 1 },
+          { name: 'Joao', id: 2 },
+          { name: 'Jean', id: 3 },
+          { name: 'Gerard', id: 4 },
+          { name: 'Marco', id: 5 },
+          { name: 'Marcel', id: 6 },
+          { name: 'Martin', id: 7 },
+        ],
+        [{ name: 'Michael', id: 1 }],
+        [],
+      ],
+    })
+    function onMove(evt) {
+      console.log(
+        'move from section: ' +
+          evt.from.dataset.section +
+          ' index: ' +
+          evt.draggedContext.index +
+          ' to section: ' +
+          evt.to.dataset.section +
+          ' index: ' +
+          evt.draggedContext.futureIndex
+      )
+    }
+    function onChange(evt) {
+      console.log(evt)
+    }
+    return {
+      state,
+      onMove,
+      onChange,
+    }
+  },
+})
+</script>
+
+<style scoped>
+.raw-displays {
+  margin: 2rem;
+}
+</style>

demo/components/nested-component.vue

@@ -9,44 +9,44 @@
 </template>
 
 <script>
+import { defineComponent, ref } from '@vue/runtime-core'
 import nestedDraggable from './nested.vue'
 import rawDisplay from './rawDisplay.vue'
-export default {
+export default defineComponent({
   name: 'nested-example',
   display: 'Nested',
   order: 15,
   components: {
     rawDisplay,
     nestedDraggable,
   },
-  data() {
-    return {
-      list: [
-        {
-          name: 'task 1',
-          tasks: [
-            {
-              name: 'task 2',
-              tasks: [],
-            },
-          ],
-        },
-        {
-          name: 'task 3',
-          tasks: [
-            {
-              name: 'task 4',
-              tasks: [],
-            },
-          ],
-        },
-        {
-          name: 'task 5',
-          tasks: [],
-        },
-      ],
-    }
+  setup() {
+    const list = ref([
+      {
+        name: 'task 1',
+        tasks: [
+          {
+            name: 'task 2',
+            tasks: [],
+          },
+        ],
+      },
+      {
+        name: 'task 3',
+        tasks: [
+          {
+            name: 'task 4',
+            tasks: [],
+          },
+        ],
+      },
+      {
+        name: 'task 5',
+        tasks: [],
+      },
+    ])
+    return { list }
   },
-}
+})
 </script>
 <style scoped></style>

demo/components/nested.vue

@@ -9,7 +9,7 @@
   </div>
 </template>
 <script>
-import { VueDraggableNext } from '/@/'
+import { VueDraggableNext } from '/@'
 export default {
   props: {
     tasks: {

demo/components/third-party.vue

@@ -40,7 +40,7 @@
 <script lang="ts">
 import { defineComponent, reactive } from 'vue'
 // @ts-ignore
-import { VueDraggableNext } from '/@/'
+import { VueDraggableNext } from '/@'
 import rawDisplays from './rawDisplay.vue'
 export default defineComponent({
   components: {

demo/components/transition-group.vue

@@ -1,9 +1,7 @@
 <template>
   <div class="flex justify-center">
     <div class="w-2/6 rounded overflow-hidden p-5">
-      <button class="btn btn-blue" @click="sort">
-        To original order
-      </button>
+      <button class="btn btn-blue" @click="sort">To original order</button>
       <draggable
         class="list-group"
         tag="ul"
@@ -35,7 +33,7 @@
 </template>
 
 <script>
-import { VueDraggableNext } from '/@/'
+import { VueDraggableNext } from '/@'
 import rawDisplayer from './rawDisplay.vue'
 const message = [
   'vue.js 3.0',

demo/components/v-model-component.vue

@@ -18,7 +18,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
 // @ts-ignore
-import { VueDraggableNext } from '/@/'
+import { VueDraggableNext } from '/@'
 import rawDisplays from './rawDisplay.vue'
 export default defineComponent({
   components: {

demo/components/vuex-component.vue

@@ -22,7 +22,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
 // @ts-ignore
-import { VueDraggableNext } from '/@/'
+import { VueDraggableNext } from '/@'
 import rawDisplays from './rawDisplay.vue'
 export default defineComponent({
   components: {

demo/index.ts

@@ -1,11 +1,12 @@
 import { createApp } from 'vue'
 import App from './App.vue'
 import { registerComponents } from './components/dynamic'
-import { store } from "./store";
+import { store } from './store'
 import './index.css'
 import './ribbons.css'
-
+import { router } from './router'
 const app = createApp(App)
 app.use(store)
+app.use(router)
 app.use(registerComponents)
 window.vm = app.mount('#app')