From 5adf420ccc53f0adbccdbb41d28353f16ea74aa2 Mon Sep 17 00:00:00 2001
From: taojunnan <taojn6@chinaunicom.cn>
Date: Tue, 28 Mar 2023 10:07:48 +0800
Subject: [PATCH] feat: add 'beforeAdded' prop and example

---
 example/components/two-lists-before-added.vue | 77 +++++++++++++++++++
 src/vuedraggable.js                           | 15 +++-
 2 files changed, 91 insertions(+), 1 deletion(-)
 create mode 100644 example/components/two-lists-before-added.vue

diff --git a/example/components/two-lists-before-added.vue b/example/components/two-lists-before-added.vue
new file mode 100644
index 0000000..69c77c7
--- /dev/null
+++ b/example/components/two-lists-before-added.vue
@@ -0,0 +1,77 @@
+<template>
+  <div class="row">
+    <div class="col-3">
+      <h3>Draggable 1</h3>
+      <draggable
+        class="list-group"
+        :list="list1"
+        group="people"
+        @change="log"
+        itemKey="name"
+      >
+        <template #item="{ element, index }">
+          <div class="list-group-item">{{ element.name }} {{ index }}</div>
+        </template>
+      </draggable>
+    </div>
+
+    <div class="col-3">
+      <h3>Draggable 2</h3>
+      <draggable
+        class="list-group"
+        :list="list2"
+        group="people"
+        @change="log"
+        itemKey="name"
+        :beforeAdded="handleBeforeAdded"
+      >
+        <template #item="{ element, index }">
+          <div class="list-group-item">{{ element.name }} {{ index }}</div>
+        </template>
+      </draggable>
+    </div>
+
+    <rawDisplayer class="col-3" :value="list1" title="List 1" />
+
+    <rawDisplayer class="col-3" :value="list2" title="List 2" />
+  </div>
+</template>
+<script>
+import draggable from "@/vuedraggable";
+
+export default {
+  name: "two-lists-before-added",
+  display: "Two Lists Before Added",
+  order: 1.5,
+  components: {
+    draggable
+  },
+  data() {
+    return {
+      list1: [
+        { name: "John", id: 1 },
+        { name: "Joao", id: 2 },
+        { name: "Jean", id: 3 },
+        { name: "Gerard", id: 4 }
+      ],
+      list2: [
+        { name: "Juan", id: 5 },
+        { name: "Edgard", id: 6 },
+        { name: "Johnson", id: 7 }
+      ]
+    };
+  },
+  methods: {
+    handleBeforeAdded(element) {
+      return {
+        ...element,
+        name: element.name + " (added)",
+        age: 18
+      };
+    },
+    log: function(evt) {
+      window.console.log(evt);
+    }
+  }
+};
+</script>
diff --git a/src/vuedraggable.js b/src/vuedraggable.js
index 678a86b..b1c97d1 100644
--- a/src/vuedraggable.js
+++ b/src/vuedraggable.js
@@ -65,6 +65,10 @@ const props = {
     type: Object,
     required: false,
     default: null
+  },
+  beforeAdded: {
+    type: Function,
+    default: null
   }
 };
 
@@ -238,12 +242,21 @@ const draggableComponent = defineComponent({
     },
 
     onDragAdd(evt) {
-      const element = evt.item._underlying_vm_;
+      let element = evt.item._underlying_vm_;
       if (element === undefined) {
         return;
       }
       removeNode(evt.item);
       const newIndex = this.getVmIndexFromDomIndex(evt.newIndex);
+
+      // handle element before add
+      if (this.beforeAdded) {
+        const newElement = this.beforeAdded(element);
+        if (newElement !== undefined) {
+          element = newElement;
+        }
+      }
+
       // @ts-ignore
       this.spliceList(newIndex, 0, element);
       const added = { element, newIndex };