Merge branch 'fix-drop-outside'

Author: odiffey

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## [v0.1.2] - 2022-11-28
+
+### Fixes
+
+-   fix: Dropping items outside of another item wouldn't trigger an update
+
 ## [v0.1.1] - 2022-08-21
 
 ### Fixes

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "vue-draggable-list",
   "description": "vue draggable list",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "type": "module",
   "license": "GPL-3.0",
   "author": {
@@ -63,4 +63,4 @@
     "vue-eslint-parser": "^9.0.3",
     "vue-tsc": "^0.40.1"
   }
-}
+}

package.json

@@ -1,25 +1,48 @@
-<script setup lang="ts">
-// This starter template is using Vue 3 <script setup> SFCs
-// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
+<script lang="ts" setup>
+import { reactive } from "vue";
+import DraggableList from "./components/DraggableList.vue";
+
+const testArray = reactive([
+    {
+        id: 1,
+        name: "Bob"
+    },
+    {
+        id: 2,
+        name: "Alice"
+    },
+    {
+        id: 3,
+        name: "Lisa"
+    }
+]);
+
+const onStart = (...args) => {
+    console.log("On start", args);
+};
+
+const onEnd = (...args) => {
+    console.log("On end", args);
+};
+
+const onUpdate = (...args) => {
+    console.log("On update", args);
+};
 </script>
 
 <template>
-    <div>
-        <a href="https://vitejs.dev" target="_blank">Vite</a>
-        <a href="https://vuejs.org/" target="_blank">Vue</a>
-    </div>
+    <h1>Example</h1>
+    <DraggableList
+        item-key="id"
+        v-model:list="testArray"
+        @start="onStart"
+        @end="onEnd"
+        @update="onUpdate"
+    >
+        <template #item="{ element }">
+            <h2>{{ element.id }} - {{ element.name }}</h2>
+        </template>
+    </DraggableList>
 </template>
 
-<style scoped>
-.logo {
-    height: 6em;
-    padding: 1.5em;
-    will-change: filter;
-}
-.logo:hover {
-    filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.vue:hover {
-    filter: drop-shadow(0 0 2em #42b883aa);
-}
-</style>
+<style scoped></style>

src/App.vue

@@ -145,9 +145,7 @@ const onDragOver = (itemIndex: number, event: DragEvent, push = false) => {
 const onDragEnd = () => {
     // Emits the end event to parent component, indicating that dragging has ended
     emit("end");
-};
-// Gets called when an element is dropped on another element
-const onDrop = () => {
+
     // Emits the update event to parent component, indicating that the order is now done and ordering/moving is done
     if (!window.draggingItem) return;
     const { itemIndex, itemListUuid, initialItemIndex, initialItemListUuid } =
@@ -164,6 +162,9 @@ const onDrop = () => {
     delete window.draggingItem;
 };
 
+// Gets called when an element is dropped on another element, currently not used
+const onDrop = () => {};
+
 // Function that gets called for each item and returns attributes
 const convertAttributes = (item: any) =>
     Object.fromEntries(