fix: improved drag drop

Author: devvaannsh

src/LiveDevelopment/BrowserScripts/RemoteFunctions.js

@@ -595,6 +595,12 @@ function RemoteFunctions(config = {}) {
      * @returns {Boolean} true if the nesting is valid
      */
     function _isValidNesting(sourceElement, targetElement) {
+        if (!sourceElement || !targetElement) {
+            return false;
+        }
+        if (!sourceElement.tagName || !targetElement.tagName) {
+            return false;
+        }
         const sourceTag = sourceElement.tagName.toUpperCase();
         const targetTag = targetElement.tagName.toUpperCase();
 
@@ -1110,44 +1116,69 @@ function RemoteFunctions(config = {}) {
 
     /**
      * this function is for finding the best target element on where to drop the dragged element
-     * for ex: div > image...here both the div and image are of the exact same size, then when user is dragging some
-     * other element, then almost everytime they want to drop it before/after the div and not like div>newEle+img
      * @param {Element} target - The current target element
-     * @returns {Element|null} - The outermost parent with all edges aligned, or null
+     * @returns {Element} - The outermost parent with all edges aligned
      */
-    function _findBestParentTarget(target) {
-        if (!target) {
-            return null;
+    function _findBestParentTarget(target, sourceElement) {
+        if (!target) { return null; }
+
+        let el = target;
+
+        const SEMANTIC_CONTAINERS = new Set([
+            "DIV", "SECTION", "ARTICLE", "ASIDE", "MAIN",
+            "HEADER", "FOOTER", "NAV",
+            "UL", "OL", "LI"
+        ]);
+
+        function isSemanticContainer(element) {
+            return element &&
+                element.nodeType === 1 &&
+                SEMANTIC_CONTAINERS.has(element.tagName);
         }
 
-        const tolerance = 1; // 1px is considered same
-        let bestParent = null;
-        let currentElement = target;
-        let parent = currentElement.parentElement;
+        function geometrySuggestsUpgrade(child, parent) {
+            const tolerance = 2;
+            const c = child.getBoundingClientRect();
+            const p = parent.getBoundingClientRect();
 
-        while (parent) {
-            if (parent.hasAttribute(GLOBALS.DATA_BRACKETS_ID_ATTR) && isElementEditable(parent)) {
-                const currentRect = currentElement.getBoundingClientRect();
-                const parentRect = parent.getBoundingClientRect();
+            const topAligned    = Math.abs(c.top    - p.top)    <= tolerance;
+            const bottomAligned = Math.abs(c.bottom - p.bottom) <= tolerance;
 
-                // check if all the edges are same
-                const topAligned = Math.abs(currentRect.top - parentRect.top) <= tolerance;
-                const bottomAligned = Math.abs(currentRect.bottom - parentRect.bottom) <= tolerance;
-                const leftAligned = Math.abs(currentRect.left - parentRect.left) <= tolerance;
-                const rightAligned = Math.abs(currentRect.right - parentRect.right) <= tolerance;
+            const fullyInside =
+                c.top >= p.top && c.bottom <= p.bottom &&
+                c.left >= p.left && c.right <= p.right;
 
-                if (topAligned && bottomAligned && leftAligned && rightAligned) {
-                    // all edges match, we prefer the parent element
-                    bestParent = parent;
-                    currentElement = parent;
-                } else {
-                    break;
+            return topAligned || bottomAligned || fullyInside;
+        }
+
+        while (el && el !== document.body) {
+            const parent = el.parentElement;
+
+            // hit element is semantic container
+            if (isSemanticContainer(el)) {
+                return el;
+            }
+
+            // child is valid sibling → allow
+            if (
+                parent &&
+                _isValidNesting(sourceElement, parent) &&
+                _canAcceptChildren(parent)
+            ) {
+                return el;
+            }
+
+            // climb if parent is semantic and geometry suggests it
+            if (parent && isSemanticContainer(parent)) {
+                if (geometrySuggestsUpgrade(el, parent)) {
+                    return parent;
                 }
             }
-            parent = parent.parentElement;
+
+            el = parent;
         }
 
-        return bestParent;
+        return null;
     }
 
     /**
@@ -1197,7 +1228,7 @@ function RemoteFunctions(config = {}) {
     }
 
     /**
-     * Handle dragover events on the document (throttled version)
+     * Handle dragover events on the document
      * Shows drop markers on valid drop targets
      * @param {Event} event - The dragover event
      */
@@ -1229,7 +1260,7 @@ function RemoteFunctions(config = {}) {
         }
 
         // Check if we should prefer a parent when all edges are aligned
-        const bestParent = _findBestParentTarget(target);
+        const bestParent = _findBestParentTarget(target, window._currentDraggedElement);
         if (bestParent) {
             target = bestParent;
         }
@@ -1306,7 +1337,7 @@ function RemoteFunctions(config = {}) {
         }
 
         // Check if we should prefer a parent when all edges are aligned
-        const bestParent = _findBestParentTarget(target);
+        const bestParent = _findBestParentTarget(target, window._currentDraggedElement);
         if (bestParent) {
             target = bestParent;
         }