feat: drag drop was happening even on slightest mouse movements which is unexpected

Author: devvaannsh

src/LiveDevelopment/BrowserScripts/RemoteFunctions.js

@@ -1532,6 +1532,8 @@ function RemoteFunctions(config = {}) {
     function onDragStart(event, element) {
         event.stopPropagation();
         event.dataTransfer.setData("text/plain", element.getAttribute(GLOBALS.DATA_BRACKETS_ID_ATTR));
+        window._dragStartX = event.clientX;
+        window._dragStartY = event.clientY;
         _dragStartChores(element);
         _clearDropMarkers();
         window._currentDraggedElement = element;
@@ -1547,6 +1549,8 @@ function RemoteFunctions(config = {}) {
         _clearDropMarkers();
         _stopAutoScroll();
         delete window._currentDraggedElement;
+        delete window._dragStartX;
+        delete window._dragStartY;
     }
 
     /**
@@ -1635,6 +1639,27 @@ function RemoteFunctions(config = {}) {
         event.preventDefault();
         event.stopPropagation();
 
+        // this is to validate that actual drag happened, otherwise sometimes just little mouse movements was causing
+        // the drag to happen which was unexpected
+        const DRAG_THRESHOLD = 5;
+
+        if (window._dragStartX !== undefined && window._dragStartY !== undefined) {
+            const deltaX = Math.abs(event.clientX - window._dragStartX);
+            const deltaY = Math.abs(event.clientY - window._dragStartY);
+
+            if (deltaX <= DRAG_THRESHOLD && deltaY <= DRAG_THRESHOLD) {
+                _clearDropMarkers();
+                _stopAutoScroll();
+                _dragEndChores(window._currentDraggedElement);
+                dismissUIAndCleanupState();
+                delete window._currentDraggedElement;
+                delete window._dragStartX;
+                delete window._dragStartY;
+                delete window._isDraggingSVG;
+                return;
+            }
+        }
+
         let target = _lastDragTarget;
 
         if (!target) {
@@ -1707,6 +1732,8 @@ function RemoteFunctions(config = {}) {
         _dragEndChores(window._currentDraggedElement);
         dismissUIAndCleanupState();
         delete window._currentDraggedElement;
+        delete window._dragStartX;
+        delete window._dragStartY;
     }
 
     /**
@@ -1718,6 +1745,8 @@ function RemoteFunctions(config = {}) {
         event.preventDefault();
         event.stopPropagation();
 
+        window._dragStartX = event.clientX;
+        window._dragStartY = event.clientY;
         window._currentDraggedElement = element;
         _dragStartChores(element);
         _clearDropMarkers();