feat: show a outline over the target element

Author: devvaannsh

src/LiveDevelopment/BrowserScripts/RemoteFunctions.js

@@ -1036,6 +1036,15 @@ function RemoteFunctions(config = {}) {
         }
         element.style.backgroundColor = "rgba(66, 133, 244, 0.22)";
 
+        // when not dropping inside we add a light outline
+        // because for inside we already show a thick dashed border
+        if (dropZone !== "inside") {
+            if (element._originalDragOutline === undefined) {
+                element._originalDragOutline = element.style.outline;
+            }
+            element.style.outline = "1px solid #4285F4";
+        }
+
         // create the marker element
         let marker = window.document.createElement("div");
 
@@ -1206,6 +1215,10 @@ function RemoteFunctions(config = {}) {
                 elements[j].style.backgroundColor = elements[j]._originalDragBackgroundColor;
                 delete elements[j]._originalDragBackgroundColor;
             }
+            if (elements[j]._originalDragOutline !== undefined) {
+                elements[j].style.outline = elements[j]._originalDragOutline;
+                delete elements[j]._originalDragOutline;
+            }
             if (elements[j]._originalDragTransform !== undefined) {
                 elements[j].style.transform = elements[j]._originalDragTransform;
                 delete elements[j]._originalDragTransform;