From c5b36863d2252b3930ad2546c2416b254aaf3d73 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 10 Oct 2022 09:36:17 +0100
Subject: [PATCH] Make DND work again by converting new parent+index params
 into old target+mode

---
 .../src/components/preview/DNDHandler.svelte  | 43 +++++++++++++++----
 1 file changed, 34 insertions(+), 9 deletions(-)

diff --git a/packages/client/src/components/preview/DNDHandler.svelte b/packages/client/src/components/preview/DNDHandler.svelte
index a4e737214f..04503f8020 100644
--- a/packages/client/src/components/preview/DNDHandler.svelte
+++ b/packages/client/src/components/preview/DNDHandler.svelte
@@ -1,9 +1,11 @@
 <script>
   import { onMount, onDestroy } from "svelte"
+  import { get } from "svelte/store"
   import IndicatorSet from "./IndicatorSet.svelte"
-  import { builderStore } from "stores"
+  import { builderStore, componentStore } from "stores"
   import PlaceholderOverlay from "./PlaceholderOverlay.svelte"
   import { Utils } from "@budibase/frontend-core"
+  import { findComponentById } from "utils/components.js"
 
   let sourceId
   let targetInfo
@@ -34,8 +36,6 @@
 
   // Callback when drag stops (whether dropped or not)
   const stopDragging = () => {
-    console.log("END")
-
     // Reset state
     sourceId = null
     targetInfo = null
@@ -198,12 +198,37 @@
 
   // Callback when dropping a drag on top of some component
   const onDrop = () => {
-    console.log("DROP")
-    // builderStore.actions.moveComponent(
-    //   dragInfo.target,
-    //   dropInfo.target,
-    //   dropInfo.mode
-    // )
+    let target, mode
+
+    // Convert parent + index into target + mode
+    if (sourceId && dropInfo?.parent && dropInfo.index != null) {
+      const parent = findComponentById(
+        get(componentStore).currentAsset?.props,
+        dropInfo.parent
+      )
+      if (!parent) {
+        return
+      }
+
+      // Filter out source component from consideration
+      const children = parent._children?.filter(x => x._id !== sourceId)
+
+      // Use inside if no existing children
+      if (!children?.length) {
+        target = parent._id
+        mode = "inside"
+      } else if (dropInfo.index === 0) {
+        target = children[0]?._id
+        mode = "above"
+      } else {
+        target = children[dropInfo.index - 1]?._id
+        mode = "below"
+      }
+    }
+
+    if (target && mode) {
+      builderStore.actions.moveComponent(sourceId, target, mode)
+    }
   }
 
   onMount(() => {