wans

src/router/generator-platform-routers.js

@@ -446,6 +446,8 @@ const constantRouterComponents = {
   'IdleAssetsSpareMap': () => import('@/views/idle-assets-map/IdleAssetsSpareMap.vue'),
   'IdleAssetsRepairMap': () => import('@/views/idle-assets-map/IdleAssetsRepairMap.vue'),
   'SbPositionImg': () => import('@/views/sb-position/SbPositionImg.vue'),
+  // test
+  'Test1': () => import('@/views/test/Test1.vue'),
   // threeJs
   'FactoryOne': () => import('@/views/threejs/factory/FactoryOne.vue')
 }

src/views/test/Test1.vue

@@ -0,0 +1,83 @@
+<template>
+  <a-row :gutter="10">
+    <a-col :span="4">
+      <a-card>
+        <VueDraggable
+          v-model="list1"
+          :animation="150"
+          :group="{ name: 'people', pull: 'clone', put: false }"
+          :sort="false"
+          class="flex flex-col gap-2 p-4 w-300px bg-gray-500/5 rounded"
+          @clone="onClone"
+        >
+          <div
+            v-for="item in list1"
+            :key="item.id"
+            class="cursor-move h-50px bg-gray-500/5 rounded p-3"
+          >
+            {{ item.name }}
+          </div>
+        </VueDraggable>
+      </a-card>
+    </a-col>
+    <a-col :span="16">
+      <a-card>
+        <VueDraggable
+          v-model="list2"
+          :animation="150"
+          group="people"
+          class="flex flex-col gap-2 p-4 w-300px m-auto bg-gray-500/5 rounded overflow-auto"
+        >
+          <div
+            v-for="item in list2"
+            :key="item.id"
+            class="cursor-move h-50px bg-gray-500/5 rounded p-3"
+          >
+            {{ item.name }}
+          </div>
+        </VueDraggable>
+      </a-card>
+    </a-col>
+    <a-col :span="4">
+      <a-card>
+        sd
+      </a-card>
+    </a-col>
+  </a-row>
+</template>
+
+<script>
+import { VueDraggable } from 'vue-draggable-plus'
+export default {
+  name: 'Test1',
+  components: {
+    VueDraggable
+  },
+  data () {
+    return {
+      list1: [
+        { id: 1, name: 'John' },
+        { id: 2, name: 'Jane' },
+        { id: 3, name: 'Jack' }
+      ],
+      list2: [
+        { id: 4, name: 'Jill' },
+        { id: 5, name: 'Joe' },
+        { id: 6, name: 'Jim' }
+      ]
+    }
+  },
+  created () {
+
+  },
+  methods: {
+    onClone () {
+      console.log('clone')
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>