From 4957b67d7d0e42709fd5972381640c8e296a904a Mon Sep 17 00:00:00 2001
From: shangbin <shangbin03@meituan.com>
Date: Tue, 29 Mar 2022 20:21:34 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E6=8B=96=E6=8B=BD?=
 =?UTF-8?q?=E5=8A=A8=E7=94=BB=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/nested.vue | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/components/nested.vue b/src/components/nested.vue
index 23f01d8..f7f33f7 100644
--- a/src/components/nested.vue
+++ b/src/components/nested.vue
@@ -1,6 +1,6 @@
 <template>
   <draggable class="dragArea" tag="ul" :list="data" @start="onStartDrag" @choose="onClick" :group="{ name: 'g1' }"
-    :item-key="getItemKey" @end="onEndDrag">
+    v-bind="dragOptions" :item-key="getItemKey" @end="onEndDrag">
     <template #item="{ element }">
       <li class="itemArea">
         <p>{{ getRawComponentKey(element) }}</p>
@@ -28,6 +28,14 @@ export default {
   },
 
   computed: {
+    dragOptions() {
+        return {
+          animation: 200,
+          group: "description",
+          disabled: false,
+          ghostClass: "ghost"
+        };
+      }
   },
   methods: {
     getItemKey(item) {
@@ -80,6 +88,11 @@ export default {
   padding-bottom: 2px;
 }
 
+.ghost {
+  opacity: 0.5;
+  background: #c8ebfb;
+}
+
 p {
   margin: 10px 0;
 }