svelte-dnd-action 0.9.68 → 0.9.70

package/README.md

@@ -120,6 +120,7 @@ An options-object with the following attributes:
 | `transformDraggedElement` | Function | No | `() => {}` | A function that is invoked when the draggable element enters the dnd-zone or hover overs a new index in the current dnd-zone. <br />Signature:<br />function(element, data, index) {}<br />**element**: The dragged element. <br />**data**: The data of the item from the items array.<br />**index**: The index the dragged element will become in the new dnd-zone.<br /><br />This allows you to override properties on the dragged element, such as innerHTML to change how it displays. If what you are after is altering styles, do it to the children, not to the dragged element itself |
 | `autoAriaDisabled` | Boolean | No | `false` | Setting it to true will disable all the automatically added aria attributes and aria alerts (for example when the user starts/ stops dragging using the keyboard).<br /> **Use it only if you intend to implement your own custom instructions, roles and alerts.** In such a case, you might find the exported function `alertToScreenReader(string)` useful. |
 | `centreDraggedOnCursor` | Boolean | No | `false` | Setting it to true will cause elements from this dnd-zone to position their center on the cursor on drag start, effectively turning the cursor to the focal point that triggers all the dnd events (ex: entering another zone). Useful for dnd-zones with large items that can be dragged over small items. |
+| `useCursorForDetection` | Boolean | No | `false` | Setting it to true will use the cursor position instead of the dragged element's center for drop zone detection. This improves accuracy when dragging large elements over small drop targets. Unlike `centreDraggedOnCursor`, this option does not reposition the dragged element. |
 | `dropAnimationDisabled` | Boolean | No | `false` | Setting it to true will disable the animation of the dropped element to its final place. |
 | `delayTouchStart` | Boolean \| Number | No | `false` | Prevents accidental drags on touch devices that should have been scrolls.  
  • `true` – enable with sensible default (80 ms).  

package/dist/index.d.ts

@@ -64,6 +64,10 @@ export interface Options<T extends Item = Item> {
      * false/undefined => drag starts instantly (legacy behaviour)
      */
     delayTouchStart?: boolean | number;
+    /**
+     * Use cursor position instead of dragged element center for drop zone detection
+     */
+    useCursorForDetection?: boolean;
 }
 
 export interface DndZoneAttributes<T> {

package/dist/index.js

@@ -480,25 +480,14 @@
   }
 
   /**
-   * @param {HTMLElement} elA
-   * @param {HTMLElement} elB
-   * @return {boolean}
-   */
-  function isCenterOfAInsideB(elA, elB) {
-    var centerOfA = findCenterOfElement(elA);
-    var rectOfB = getAbsoluteRectNoTransforms(elB);
-    return isPointInsideRect(centerOfA, rectOfB);
-  }
-
-  /**
-   * @param {HTMLElement|ChildNode} elA
-   * @param {HTMLElement|ChildNode} elB
+   * Calculate distance from a point to the center of an element
+   * @param {{x: number, y: number}} point
+   * @param {HTMLElement|ChildNode} el
    * @return {number}
    */
-  function calcDistanceBetweenCenters(elA, elB) {
-    var centerOfA = findCenterOfElement(elA);
-    var centerOfB = findCenterOfElement(elB);
-    return calcDistance(centerOfA, centerOfB);
+  function calcDistanceFromPointToCenter(point, el) {
+    var centerOfEl = findCenterOfElement(el);
+    return calcDistance(point, centerOfEl);
   }
 
   /**
@@ -637,12 +626,13 @@
    */
   /**
    * Find the index for the dragged element in the list it is dragged over
-   * @param {HTMLElement} floatingAboveEl
+   * @param {{x: number, y: number}} referencePoint - The reference point for detection (cursor position or element center)
    * @param {HTMLElement} collectionBelowEl
    * @returns {Index|null} -  if the element is over the container the Index object otherwise null
    */
-  function findWouldBeIndex(floatingAboveEl, collectionBelowEl) {
-    if (!isCenterOfAInsideB(floatingAboveEl, collectionBelowEl)) {
+  function findWouldBeIndex(referencePoint, collectionBelowEl) {
+    var collectionRect = getAbsoluteRectNoTransforms(collectionBelowEl);
+    if (!isPointInsideRect(referencePoint, collectionRect)) {
       return null;
     }
     var children = collectionBelowEl.children;
@@ -658,10 +648,11 @@
     // the search could be more efficient but keeping it simple for now
     // a possible improvement: pass in the lastIndex it was found in and check there first, then expand from there
     for (var i = 0; i < children.length; i++) {
-      if (isCenterOfAInsideB(floatingAboveEl, children[i])) {
+      var childRect = getAbsoluteRectNoTransforms(children[i]);
+      if (isPointInsideRect(referencePoint, childRect)) {
         var cachedShadowRect = dzToShadowIndexToRect.has(collectionBelowEl) && dzToShadowIndexToRect.get(collectionBelowEl).get(i);
         if (cachedShadowRect) {
-          if (!isPointInsideRect(findCenterOfElement(floatingAboveEl), cachedShadowRect)) {
+          if (!isPointInsideRect(referencePoint, cachedShadowRect)) {
             return {
               index: shadowElIndex,
               isProximityBased: false
@@ -680,7 +671,7 @@
     var indexOfMin = undefined;
     // we are checking all of them because we don't know whether we are dealing with a horizontal or vertical container and where the floating element entered from
     for (var _i = 0; _i < children.length; _i++) {
-      var distance = calcDistanceBetweenCenters(floatingAboveEl, children[_i]);
+      var distance = calcDistanceFromPointToCenter(referencePoint, children[_i]);
       if (distance < minDistanceSoFar) {
         minDistanceSoFar = distance;
         indexOfMin = _i;
@@ -705,7 +696,7 @@
       phantom.style.visibility = "hidden";
       phantom.style.pointerEvents = "none";
       collectionBelowEl.appendChild(phantom);
-      var phantomDistance = calcDistanceBetweenCenters(floatingAboveEl, phantom);
+      var phantomDistance = calcDistanceFromPointToCenter(referencePoint, phantom);
       if (phantomDistance < minDistanceSoFar) {
         indexOfMin = originalLen; // index of phantom slot in original list
       }
@@ -791,10 +782,12 @@
    * @param {HTMLElement} draggedEl
    * @param {number} [intervalMs = INTERVAL_MS]
    * @param {MultiScroller} multiScroller
+   * @param {function(): {x: number, y: number}} getReferencePoint - Function that returns the reference point for detection (cursor or element center)
    */
   function observe(draggedEl, dropZones) {
     var intervalMs = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : INTERVAL_MS;
     var multiScroller = arguments.length > 3 ? arguments[3] : undefined;
+    var getReferencePoint = arguments.length > 4 ? arguments[4] : undefined;
     // initialization
     var lastDropZoneFound;
     var lastIndexFound;
@@ -809,10 +802,10 @@
      * The main function in this module. Tracks where everything is/ should be a take the actions
      */
     function andNow() {
-      var currentCenterOfDragged = findCenterOfElement(draggedEl);
+      var referencePoint = getReferencePoint();
       var scrolled = multiScroller.multiScrollIfNeeded();
       // we only want to make a new decision after the element was moved a bit to prevent flickering
-      if (!scrolled && lastCentrePositionOfDragged && Math.abs(lastCentrePositionOfDragged.x - currentCenterOfDragged.x) < TOLERANCE_PX && Math.abs(lastCentrePositionOfDragged.y - currentCenterOfDragged.y) < TOLERANCE_PX) {
+      if (!scrolled && lastCentrePositionOfDragged && Math.abs(lastCentrePositionOfDragged.x - referencePoint.x) < TOLERANCE_PX && Math.abs(lastCentrePositionOfDragged.y - referencePoint.y) < TOLERANCE_PX) {
         next = window.setTimeout(andNow, intervalMs);
         return;
       }
@@ -823,7 +816,7 @@
         dispatchDraggedLeftDocument(draggedEl);
         return;
       }
-      lastCentrePositionOfDragged = currentCenterOfDragged;
+      lastCentrePositionOfDragged = referencePoint;
       // this is a simple algorithm, potential improvement: first look at lastDropZoneFound
       var isDraggedInADropZone = false;
       var _iterator = _createForOfIteratorHelper(dropZonesFromDeepToShallow),
@@ -832,7 +825,7 @@
         for (_iterator.s(); !(_step = _iterator.n()).done;) {
           var dz = _step.value;
           if (scrolled) resetIndexesCache();
-          var indexObj = findWouldBeIndex(draggedEl, dz);
+          var indexObj = findWouldBeIndex(referencePoint, dz);
           if (indexObj === null) {
             // it is not inside
             continue;
@@ -1419,6 +1412,7 @@
   var multiScroller;
   var touchDragHoldTimer;
   var touchHoldElapsed = false;
+  var useCursorForDetectionActive = false;
 
   // a map from type to a set of drop-zones
   var typeToDropZones$1 = new Map();
@@ -1478,7 +1472,16 @@
     multiScroller = createMultiScroller(dropZones, function () {
       return currentMousePosition;
     });
-    observe(draggedEl, dropZones, observationIntervalMs * 1.07, multiScroller);
+    // Returns reference point in document coordinates - either cursor position or element center
+    var getReferencePoint = useCursorForDetectionActive ? function () {
+      return {
+        x: currentMousePosition.x + window.scrollX,
+        y: currentMousePosition.y + window.scrollY
+      };
+    } : function () {
+      return findCenterOfElement(draggedEl);
+    };
+    observe(draggedEl, dropZones, observationIntervalMs * 1.07, multiScroller, getReferencePoint);
   }
   function unWatchDraggedElement() {
     printDebug(function () {
@@ -1764,6 +1767,7 @@
     }
     touchDragHoldTimer = undefined;
     touchHoldElapsed = false;
+    useCursorForDetectionActive = false;
     if (scheduledForRemovalAfterDrop.length) {
       printDebug(function () {
         return ["will destroy zones that were removed during drag", scheduledForRemovalAfterDrop];
@@ -1790,6 +1794,7 @@
       dropTargetClasses: [],
       transformDraggedElement: function transformDraggedElement() {},
       centreDraggedOnCursor: false,
+      useCursorForDetection: false,
       dropAnimationDisabled: false,
       delayTouchStartMs: 0
     };
@@ -1935,17 +1940,24 @@
       var originDropZoneRoot = rootNode.body || rootNode;
       var originalItems = config.items,
         type = config.type,
-        centreDraggedOnCursor = config.centreDraggedOnCursor;
+        centreDraggedOnCursor = config.centreDraggedOnCursor,
+        useCursorForDetection = config.useCursorForDetection;
       var items = _toConsumableArray(originalItems);
       draggedElData = items[currentIdx];
       draggedElType = type;
       shadowElData = createShadowElData(draggedElData);
+      useCursorForDetectionActive = useCursorForDetection;
 
       // creating the draggable element
       draggedEl = createDraggedElementFrom(originalDragTarget, centreDraggedOnCursor && currentMousePosition);
       originDropZoneRoot.appendChild(draggedEl);
       // We will keep the original dom node in the dom because touch events keep firing on it, we want to re-add it after the framework removes it
       function keepOriginalElementInDom() {
+        // if the drag was already finalized (cleanupPostDrop cleared draggedEl), this rAF loop
+        // must not re-arm the watcher: the original element might leave the DOM long after the
+        // drop (ex: its component unmounts), which would call watchDraggedElement() with an
+        // undefined draggedEl and crash inside observe() (getBoundingClientRect of undefined)
+        if (!draggedEl) return;
         if (!originalDragTarget.parentElement) {
           originalDragTarget.setAttribute(ORIGINAL_DRAGGED_ITEM_MARKER_ATTRIBUTE, true);
           originDropZoneRoot.appendChild(originalDragTarget);
@@ -2014,6 +2026,8 @@
         transformDraggedElement = _ref2$transformDragge === void 0 ? function () {} : _ref2$transformDragge,
         _ref2$centreDraggedOn = _ref2.centreDraggedOnCursor,
         centreDraggedOnCursor = _ref2$centreDraggedOn === void 0 ? false : _ref2$centreDraggedOn,
+        _ref2$useCursorForDet = _ref2.useCursorForDetection,
+        useCursorForDetection = _ref2$useCursorForDet === void 0 ? false : _ref2$useCursorForDet,
         _ref2$dropAnimationDi = _ref2.dropAnimationDisabled,
         dropAnimationDisabled = _ref2$dropAnimationDi === void 0 ? false : _ref2$dropAnimationDi,
         _ref2$delayTouchStart = _ref2.delayTouchStart,
@@ -2035,6 +2049,7 @@
       config.morphDisabled = morphDisabled;
       config.transformDraggedElement = transformDraggedElement;
       config.centreDraggedOnCursor = centreDraggedOnCursor;
+      config.useCursorForDetection = useCursorForDetection;
       config.dropAnimationDisabled = dropAnimationDisabled;
 
       // realtime update for dropTargetStyle
@@ -2626,7 +2641,7 @@
     return handles;
   }
 
-  var _excluded = ["items", "flipDurationMs", "type", "dragDisabled", "morphDisabled", "dropFromOthersDisabled", "zoneTabIndex", "zoneItemTabIndex", "dropTargetStyle", "dropTargetClasses", "transformDraggedElement", "autoAriaDisabled", "centreDraggedOnCursor", "delayTouchStart", "dropAnimationDisabled"];
+  var _excluded = ["items", "flipDurationMs", "type", "dragDisabled", "morphDisabled", "dropFromOthersDisabled", "zoneTabIndex", "zoneItemTabIndex", "dropTargetStyle", "dropTargetClasses", "transformDraggedElement", "autoAriaDisabled", "centreDraggedOnCursor", "useCursorForDetection", "delayTouchStart", "dropAnimationDisabled"];
 
   /**
    * A custom action to turn any container to a dnd zone and all of its direct children to draggables
@@ -2700,6 +2715,7 @@
       options.transformDraggedElement;
       options.autoAriaDisabled;
       options.centreDraggedOnCursor;
+      options.useCursorForDetection;
       var delayTouchStart = options.delayTouchStart;
       options.dropAnimationDisabled;
       var rest = _objectWithoutProperties(options, _excluded);

package/dist/index.mjs

@@ -474,25 +474,14 @@ function findCenterOfElement(el) {
 }
 
 /**
- * @param {HTMLElement} elA
- * @param {HTMLElement} elB
- * @return {boolean}
- */
-function isCenterOfAInsideB(elA, elB) {
-  var centerOfA = findCenterOfElement(elA);
-  var rectOfB = getAbsoluteRectNoTransforms(elB);
-  return isPointInsideRect(centerOfA, rectOfB);
-}
-
-/**
- * @param {HTMLElement|ChildNode} elA
- * @param {HTMLElement|ChildNode} elB
+ * Calculate distance from a point to the center of an element
+ * @param {{x: number, y: number}} point
+ * @param {HTMLElement|ChildNode} el
  * @return {number}
  */
-function calcDistanceBetweenCenters(elA, elB) {
-  var centerOfA = findCenterOfElement(elA);
-  var centerOfB = findCenterOfElement(elB);
-  return calcDistance(centerOfA, centerOfB);
+function calcDistanceFromPointToCenter(point, el) {
+  var centerOfEl = findCenterOfElement(el);
+  return calcDistance(point, centerOfEl);
 }
 
 /**
@@ -631,12 +620,13 @@ function cacheShadowRect(dz) {
  */
 /**
  * Find the index for the dragged element in the list it is dragged over
- * @param {HTMLElement} floatingAboveEl
+ * @param {{x: number, y: number}} referencePoint - The reference point for detection (cursor position or element center)
  * @param {HTMLElement} collectionBelowEl
  * @returns {Index|null} -  if the element is over the container the Index object otherwise null
  */
-function findWouldBeIndex(floatingAboveEl, collectionBelowEl) {
-  if (!isCenterOfAInsideB(floatingAboveEl, collectionBelowEl)) {
+function findWouldBeIndex(referencePoint, collectionBelowEl) {
+  var collectionRect = getAbsoluteRectNoTransforms(collectionBelowEl);
+  if (!isPointInsideRect(referencePoint, collectionRect)) {
     return null;
   }
   var children = collectionBelowEl.children;
@@ -652,10 +642,11 @@ function findWouldBeIndex(floatingAboveEl, collectionBelowEl) {
   // the search could be more efficient but keeping it simple for now
   // a possible improvement: pass in the lastIndex it was found in and check there first, then expand from there
   for (var i = 0; i < children.length; i++) {
-    if (isCenterOfAInsideB(floatingAboveEl, children[i])) {
+    var childRect = getAbsoluteRectNoTransforms(children[i]);
+    if (isPointInsideRect(referencePoint, childRect)) {
       var cachedShadowRect = dzToShadowIndexToRect.has(collectionBelowEl) && dzToShadowIndexToRect.get(collectionBelowEl).get(i);
       if (cachedShadowRect) {
-        if (!isPointInsideRect(findCenterOfElement(floatingAboveEl), cachedShadowRect)) {
+        if (!isPointInsideRect(referencePoint, cachedShadowRect)) {
           return {
             index: shadowElIndex,
             isProximityBased: false
@@ -674,7 +665,7 @@ function findWouldBeIndex(floatingAboveEl, collectionBelowEl) {
   var indexOfMin = undefined;
   // we are checking all of them because we don't know whether we are dealing with a horizontal or vertical container and where the floating element entered from
   for (var _i = 0; _i < children.length; _i++) {
-    var distance = calcDistanceBetweenCenters(floatingAboveEl, children[_i]);
+    var distance = calcDistanceFromPointToCenter(referencePoint, children[_i]);
     if (distance < minDistanceSoFar) {
       minDistanceSoFar = distance;
       indexOfMin = _i;
@@ -699,7 +690,7 @@ function findWouldBeIndex(floatingAboveEl, collectionBelowEl) {
     phantom.style.visibility = "hidden";
     phantom.style.pointerEvents = "none";
     collectionBelowEl.appendChild(phantom);
-    var phantomDistance = calcDistanceBetweenCenters(floatingAboveEl, phantom);
+    var phantomDistance = calcDistanceFromPointToCenter(referencePoint, phantom);
     if (phantomDistance < minDistanceSoFar) {
       indexOfMin = originalLen; // index of phantom slot in original list
     }
@@ -785,10 +776,12 @@ var next;
  * @param {HTMLElement} draggedEl
  * @param {number} [intervalMs = INTERVAL_MS]
  * @param {MultiScroller} multiScroller
+ * @param {function(): {x: number, y: number}} getReferencePoint - Function that returns the reference point for detection (cursor or element center)
  */
 function observe(draggedEl, dropZones) {
   var intervalMs = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : INTERVAL_MS;
   var multiScroller = arguments.length > 3 ? arguments[3] : undefined;
+  var getReferencePoint = arguments.length > 4 ? arguments[4] : undefined;
   // initialization
   var lastDropZoneFound;
   var lastIndexFound;
@@ -803,10 +796,10 @@ function observe(draggedEl, dropZones) {
    * The main function in this module. Tracks where everything is/ should be a take the actions
    */
   function andNow() {
-    var currentCenterOfDragged = findCenterOfElement(draggedEl);
+    var referencePoint = getReferencePoint();
     var scrolled = multiScroller.multiScrollIfNeeded();
     // we only want to make a new decision after the element was moved a bit to prevent flickering
-    if (!scrolled && lastCentrePositionOfDragged && Math.abs(lastCentrePositionOfDragged.x - currentCenterOfDragged.x) < TOLERANCE_PX && Math.abs(lastCentrePositionOfDragged.y - currentCenterOfDragged.y) < TOLERANCE_PX) {
+    if (!scrolled && lastCentrePositionOfDragged && Math.abs(lastCentrePositionOfDragged.x - referencePoint.x) < TOLERANCE_PX && Math.abs(lastCentrePositionOfDragged.y - referencePoint.y) < TOLERANCE_PX) {
       next = window.setTimeout(andNow, intervalMs);
       return;
     }
@@ -817,7 +810,7 @@ function observe(draggedEl, dropZones) {
       dispatchDraggedLeftDocument(draggedEl);
       return;
     }
-    lastCentrePositionOfDragged = currentCenterOfDragged;
+    lastCentrePositionOfDragged = referencePoint;
     // this is a simple algorithm, potential improvement: first look at lastDropZoneFound
     var isDraggedInADropZone = false;
     var _iterator = _createForOfIteratorHelper(dropZonesFromDeepToShallow),
@@ -826,7 +819,7 @@ function observe(draggedEl, dropZones) {
       for (_iterator.s(); !(_step = _iterator.n()).done;) {
         var dz = _step.value;
         if (scrolled) resetIndexesCache();
-        var indexObj = findWouldBeIndex(draggedEl, dz);
+        var indexObj = findWouldBeIndex(referencePoint, dz);
         if (indexObj === null) {
           // it is not inside
           continue;
@@ -1413,6 +1406,7 @@ var scheduledForRemovalAfterDrop = [];
 var multiScroller;
 var touchDragHoldTimer;
 var touchHoldElapsed = false;
+var useCursorForDetectionActive = false;
 
 // a map from type to a set of drop-zones
 var typeToDropZones$1 = new Map();
@@ -1472,7 +1466,16 @@ function watchDraggedElement() {
   multiScroller = createMultiScroller(dropZones, function () {
     return currentMousePosition;
   });
-  observe(draggedEl, dropZones, observationIntervalMs * 1.07, multiScroller);
+  // Returns reference point in document coordinates - either cursor position or element center
+  var getReferencePoint = useCursorForDetectionActive ? function () {
+    return {
+      x: currentMousePosition.x + window.scrollX,
+      y: currentMousePosition.y + window.scrollY
+    };
+  } : function () {
+    return findCenterOfElement(draggedEl);
+  };
+  observe(draggedEl, dropZones, observationIntervalMs * 1.07, multiScroller, getReferencePoint);
 }
 function unWatchDraggedElement() {
   printDebug(function () {
@@ -1758,6 +1761,7 @@ function cleanupPostDrop() {
   }
   touchDragHoldTimer = undefined;
   touchHoldElapsed = false;
+  useCursorForDetectionActive = false;
   if (scheduledForRemovalAfterDrop.length) {
     printDebug(function () {
       return ["will destroy zones that were removed during drag", scheduledForRemovalAfterDrop];
@@ -1784,6 +1788,7 @@ function dndzone$2(node, options) {
     dropTargetClasses: [],
     transformDraggedElement: function transformDraggedElement() {},
     centreDraggedOnCursor: false,
+    useCursorForDetection: false,
     dropAnimationDisabled: false,
     delayTouchStartMs: 0
   };
@@ -1929,17 +1934,24 @@ function dndzone$2(node, options) {
     var originDropZoneRoot = rootNode.body || rootNode;
     var originalItems = config.items,
       type = config.type,
-      centreDraggedOnCursor = config.centreDraggedOnCursor;
+      centreDraggedOnCursor = config.centreDraggedOnCursor,
+      useCursorForDetection = config.useCursorForDetection;
     var items = _toConsumableArray(originalItems);
     draggedElData = items[currentIdx];
     draggedElType = type;
     shadowElData = createShadowElData(draggedElData);
+    useCursorForDetectionActive = useCursorForDetection;
 
     // creating the draggable element
     draggedEl = createDraggedElementFrom(originalDragTarget, centreDraggedOnCursor && currentMousePosition);
     originDropZoneRoot.appendChild(draggedEl);
     // We will keep the original dom node in the dom because touch events keep firing on it, we want to re-add it after the framework removes it
     function keepOriginalElementInDom() {
+      // if the drag was already finalized (cleanupPostDrop cleared draggedEl), this rAF loop
+      // must not re-arm the watcher: the original element might leave the DOM long after the
+      // drop (ex: its component unmounts), which would call watchDraggedElement() with an
+      // undefined draggedEl and crash inside observe() (getBoundingClientRect of undefined)
+      if (!draggedEl) return;
       if (!originalDragTarget.parentElement) {
         originalDragTarget.setAttribute(ORIGINAL_DRAGGED_ITEM_MARKER_ATTRIBUTE, true);
         originDropZoneRoot.appendChild(originalDragTarget);
@@ -2008,6 +2020,8 @@ function dndzone$2(node, options) {
       transformDraggedElement = _ref2$transformDragge === void 0 ? function () {} : _ref2$transformDragge,
       _ref2$centreDraggedOn = _ref2.centreDraggedOnCursor,
       centreDraggedOnCursor = _ref2$centreDraggedOn === void 0 ? false : _ref2$centreDraggedOn,
+      _ref2$useCursorForDet = _ref2.useCursorForDetection,
+      useCursorForDetection = _ref2$useCursorForDet === void 0 ? false : _ref2$useCursorForDet,
       _ref2$dropAnimationDi = _ref2.dropAnimationDisabled,
       dropAnimationDisabled = _ref2$dropAnimationDi === void 0 ? false : _ref2$dropAnimationDi,
       _ref2$delayTouchStart = _ref2.delayTouchStart,
@@ -2029,6 +2043,7 @@ function dndzone$2(node, options) {
     config.morphDisabled = morphDisabled;
     config.transformDraggedElement = transformDraggedElement;
     config.centreDraggedOnCursor = centreDraggedOnCursor;
+    config.useCursorForDetection = useCursorForDetection;
     config.dropAnimationDisabled = dropAnimationDisabled;
 
     // realtime update for dropTargetStyle
@@ -2620,7 +2635,7 @@ function dndzone$1(node, options) {
   return handles;
 }
 
-var _excluded = ["items", "flipDurationMs", "type", "dragDisabled", "morphDisabled", "dropFromOthersDisabled", "zoneTabIndex", "zoneItemTabIndex", "dropTargetStyle", "dropTargetClasses", "transformDraggedElement", "autoAriaDisabled", "centreDraggedOnCursor", "delayTouchStart", "dropAnimationDisabled"];
+var _excluded = ["items", "flipDurationMs", "type", "dragDisabled", "morphDisabled", "dropFromOthersDisabled", "zoneTabIndex", "zoneItemTabIndex", "dropTargetStyle", "dropTargetClasses", "transformDraggedElement", "autoAriaDisabled", "centreDraggedOnCursor", "useCursorForDetection", "delayTouchStart", "dropAnimationDisabled"];
 
 /**
  * A custom action to turn any container to a dnd zone and all of its direct children to draggables
@@ -2694,6 +2709,7 @@ function validateOptions(options) {
     options.transformDraggedElement;
     options.autoAriaDisabled;
     options.centreDraggedOnCursor;
+    options.useCursorForDetection;
     var delayTouchStart = options.delayTouchStart;
     options.dropAnimationDisabled;
     var rest = _objectWithoutProperties(options, _excluded);

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "svelte-dnd-action",
     "description": "*An awesome drag and drop library for Svelte 3 and 4 (not using the browser's built-in dnd, thanks god): Rich animations, nested containers, touch support and more *",
-    "version": "0.9.68",
+    "version": "0.9.70",
     "repository": {
         "type": "git",
         "url": "git+https://github.com/isaacHagoel/svelte-dnd-action.git"

package/src/action.js

@@ -77,6 +77,7 @@ function validateOptions(options) {
         transformDraggedElement,
         autoAriaDisabled,
         centreDraggedOnCursor,
+        useCursorForDetection,
         delayTouchStart,
         dropAnimationDisabled,
         ...rest

package/src/helpers/intersection.js

@@ -128,25 +128,14 @@ export function findCenterOfElement(el) {
 }
 
 /**
- * @param {HTMLElement} elA
- * @param {HTMLElement} elB
- * @return {boolean}
- */
-export function isCenterOfAInsideB(elA, elB) {
-    const centerOfA = findCenterOfElement(elA);
-    const rectOfB = getAbsoluteRectNoTransforms(elB);
-    return isPointInsideRect(centerOfA, rectOfB);
-}
-
-/**
- * @param {HTMLElement|ChildNode} elA
- * @param {HTMLElement|ChildNode} elB
+ * Calculate distance from a point to the center of an element
+ * @param {{x: number, y: number}} point
+ * @param {HTMLElement|ChildNode} el
  * @return {number}
  */
-export function calcDistanceBetweenCenters(elA, elB) {
-    const centerOfA = findCenterOfElement(elA);
-    const centerOfB = findCenterOfElement(elB);
-    return calcDistance(centerOfA, centerOfB);
+export function calcDistanceFromPointToCenter(point, el) {
+    const centerOfEl = findCenterOfElement(el);
+    return calcDistance(point, centerOfEl);
 }
 
 /**

package/src/helpers/listUtil.js

@@ -1,4 +1,4 @@
-import {isCenterOfAInsideB, calcDistanceBetweenCenters, getAbsoluteRectNoTransforms, isPointInsideRect, findCenterOfElement} from "./intersection";
+import {getAbsoluteRectNoTransforms, isPointInsideRect, calcDistanceFromPointToCenter} from "./intersection";
 import {printDebug, SHADOW_ELEMENT_ATTRIBUTE_NAME} from "../constants";
 
 let dzToShadowIndexToRect;
@@ -37,14 +37,16 @@ function cacheShadowRect(dz) {
  */
 /**
  * Find the index for the dragged element in the list it is dragged over
- * @param {HTMLElement} floatingAboveEl
+ * @param {{x: number, y: number}} referencePoint - The reference point for detection (cursor position or element center)
  * @param {HTMLElement} collectionBelowEl
  * @returns {Index|null} -  if the element is over the container the Index object otherwise null
  */
-export function findWouldBeIndex(floatingAboveEl, collectionBelowEl) {
-    if (!isCenterOfAInsideB(floatingAboveEl, collectionBelowEl)) {
+export function findWouldBeIndex(referencePoint, collectionBelowEl) {
+    const collectionRect = getAbsoluteRectNoTransforms(collectionBelowEl);
+    if (!isPointInsideRect(referencePoint, collectionRect)) {
         return null;
     }
+
     const children = collectionBelowEl.children;
     // the container is empty, floating element should be the first
     if (children.length === 0) {
@@ -55,10 +57,11 @@ export function findWouldBeIndex(floatingAboveEl, collectionBelowEl) {
     // the search could be more efficient but keeping it simple for now
     // a possible improvement: pass in the lastIndex it was found in and check there first, then expand from there
     for (let i = 0; i < children.length; i++) {
-        if (isCenterOfAInsideB(floatingAboveEl, children[i])) {
+        const childRect = getAbsoluteRectNoTransforms(children[i]);
+        if (isPointInsideRect(referencePoint, childRect)) {
             const cachedShadowRect = dzToShadowIndexToRect.has(collectionBelowEl) && dzToShadowIndexToRect.get(collectionBelowEl).get(i);
             if (cachedShadowRect) {
-                if (!isPointInsideRect(findCenterOfElement(floatingAboveEl), cachedShadowRect)) {
+                if (!isPointInsideRect(referencePoint, cachedShadowRect)) {
                     return {index: shadowElIndex, isProximityBased: false};
                 }
             }
@@ -71,7 +74,7 @@ export function findWouldBeIndex(floatingAboveEl, collectionBelowEl) {
     let indexOfMin = undefined;
     // we are checking all of them because we don't know whether we are dealing with a horizontal or vertical container and where the floating element entered from
     for (let i = 0; i < children.length; i++) {
-        const distance = calcDistanceBetweenCenters(floatingAboveEl, children[i]);
+        const distance = calcDistanceFromPointToCenter(referencePoint, children[i]);
         if (distance < minDistanceSoFar) {
             minDistanceSoFar = distance;
             indexOfMin = i;
@@ -97,7 +100,7 @@ export function findWouldBeIndex(floatingAboveEl, collectionBelowEl) {
         phantom.style.pointerEvents = "none";
         collectionBelowEl.appendChild(phantom);
 
-        const phantomDistance = calcDistanceBetweenCenters(floatingAboveEl, phantom);
+        const phantomDistance = calcDistanceFromPointToCenter(referencePoint, phantom);
         if (phantomDistance < minDistanceSoFar) {
             indexOfMin = originalLen; // index of phantom slot in original list
         }

package/src/helpers/observer.js

@@ -1,5 +1,5 @@
 import {findWouldBeIndex, resetIndexesCache} from "./listUtil";
-import {findCenterOfElement, isElementOffDocument} from "./intersection";
+import {isElementOffDocument} from "./intersection";
 import {
     dispatchDraggedElementEnteredContainer,
     dispatchDraggedElementLeftContainerForAnother,
@@ -20,8 +20,9 @@ let next;
  * @param {HTMLElement} draggedEl
  * @param {number} [intervalMs = INTERVAL_MS]
  * @param {MultiScroller} multiScroller
+ * @param {function(): {x: number, y: number}} getReferencePoint - Function that returns the reference point for detection (cursor or element center)
  */
-export function observe(draggedEl, dropZones, intervalMs = INTERVAL_MS, multiScroller) {
+export function observe(draggedEl, dropZones, intervalMs = INTERVAL_MS, multiScroller, getReferencePoint) {
     // initialization
     let lastDropZoneFound;
     let lastIndexFound;
@@ -34,14 +35,14 @@ export function observe(draggedEl, dropZones, intervalMs = INTERVAL_MS, multiScr
      * The main function in this module. Tracks where everything is/ should be a take the actions
      */
     function andNow() {
-        const currentCenterOfDragged = findCenterOfElement(draggedEl);
+        const referencePoint = getReferencePoint();
         const scrolled = multiScroller.multiScrollIfNeeded();
         // we only want to make a new decision after the element was moved a bit to prevent flickering
         if (
             !scrolled &&
             lastCentrePositionOfDragged &&
-            Math.abs(lastCentrePositionOfDragged.x - currentCenterOfDragged.x) < TOLERANCE_PX &&
-            Math.abs(lastCentrePositionOfDragged.y - currentCenterOfDragged.y) < TOLERANCE_PX
+            Math.abs(lastCentrePositionOfDragged.x - referencePoint.x) < TOLERANCE_PX &&
+            Math.abs(lastCentrePositionOfDragged.y - referencePoint.y) < TOLERANCE_PX
         ) {
             next = window.setTimeout(andNow, intervalMs);
             return;
@@ -52,12 +53,12 @@ export function observe(draggedEl, dropZones, intervalMs = INTERVAL_MS, multiScr
             return;
         }
 
-        lastCentrePositionOfDragged = currentCenterOfDragged;
+        lastCentrePositionOfDragged = referencePoint;
         // this is a simple algorithm, potential improvement: first look at lastDropZoneFound
         let isDraggedInADropZone = false;
         for (const dz of dropZonesFromDeepToShallow) {
             if (scrolled) resetIndexesCache();
-            const indexObj = findWouldBeIndex(draggedEl, dz);
+            const indexObj = findWouldBeIndex(referencePoint, dz);
             if (indexObj === null) {
                 // it is not inside
                 continue;

package/src/pointerAction.js

@@ -33,7 +33,7 @@ import {
     DRAGGED_OVER_INDEX_EVENT_NAME
 } from "./helpers/dispatcher";
 import {areArraysShallowEqualSameOrder, areObjectsShallowEqual, toString} from "./helpers/util";
-import {getBoundingRectNoTransforms} from "./helpers/intersection";
+import {getBoundingRectNoTransforms, findCenterOfElement} from "./helpers/intersection";
 
 const DEFAULT_DROP_ZONE_TYPE = "--any--";
 const MIN_OBSERVATION_INTERVAL_MS = 100;
@@ -63,6 +63,7 @@ let scheduledForRemovalAfterDrop = [];
 let multiScroller;
 let touchDragHoldTimer;
 let touchHoldElapsed = false;
+let useCursorForDetectionActive = false;
 
 // a map from type to a set of drop-zones
 const typeToDropZones = new Map();
@@ -106,7 +107,14 @@ function watchDraggedElement() {
     const setIntervalMs = Math.max(...Array.from(dropZones.keys()).map(dz => dzToConfig.get(dz).dropAnimationDurationMs));
     const observationIntervalMs = setIntervalMs === 0 ? DISABLED_OBSERVATION_INTERVAL_MS : Math.max(setIntervalMs, MIN_OBSERVATION_INTERVAL_MS); // if setIntervalMs is 0 it goes to 20, otherwise it is max between it and min observation.
     multiScroller = createMultiScroller(dropZones, () => currentMousePosition);
-    observe(draggedEl, dropZones, observationIntervalMs * 1.07, multiScroller);
+    // Returns reference point in document coordinates - either cursor position or element center
+    const getReferencePoint = useCursorForDetectionActive
+        ? () => ({
+              x: currentMousePosition.x + window.scrollX,
+              y: currentMousePosition.y + window.scrollY
+          })
+        : () => findCenterOfElement(draggedEl);
+    observe(draggedEl, dropZones, observationIntervalMs * 1.07, multiScroller, getReferencePoint);
 }
 function unWatchDraggedElement() {
     printDebug(() => "unwatching dragged element");
@@ -339,6 +347,7 @@ function cleanupPostDrop() {
     }
     touchDragHoldTimer = undefined;
     touchHoldElapsed = false;
+    useCursorForDetectionActive = false;
     if (scheduledForRemovalAfterDrop.length) {
         printDebug(() => ["will destroy zones that were removed during drag", scheduledForRemovalAfterDrop]);
         scheduledForRemovalAfterDrop.forEach(({dz, destroy}) => {
@@ -362,6 +371,7 @@ export function dndzone(node, options) {
         dropTargetClasses: [],
         transformDraggedElement: () => {},
         centreDraggedOnCursor: false,
+        useCursorForDetection: false,
         dropAnimationDisabled: false,
         delayTouchStartMs: 0
     };
@@ -489,17 +499,23 @@ export function dndzone(node, options) {
         /** @type {ShadowRoot | HTMLDocument | Element } */
         const rootNode = originDropZone.closest("dialog") || originDropZone.closest("[popover]") || originDropZone.getRootNode();
         const originDropZoneRoot = rootNode.body || rootNode;
-        const {items: originalItems, type, centreDraggedOnCursor} = config;
+        const {items: originalItems, type, centreDraggedOnCursor, useCursorForDetection} = config;
         const items = [...originalItems];
         draggedElData = items[currentIdx];
         draggedElType = type;
         shadowElData = createShadowElData(draggedElData);
+        useCursorForDetectionActive = useCursorForDetection;
 
         // creating the draggable element
         draggedEl = createDraggedElementFrom(originalDragTarget, centreDraggedOnCursor && currentMousePosition);
         originDropZoneRoot.appendChild(draggedEl);
         // We will keep the original dom node in the dom because touch events keep firing on it, we want to re-add it after the framework removes it
         function keepOriginalElementInDom() {
+            // if the drag was already finalized (cleanupPostDrop cleared draggedEl), this rAF loop
+            // must not re-arm the watcher: the original element might leave the DOM long after the
+            // drop (ex: its component unmounts), which would call watchDraggedElement() with an
+            // undefined draggedEl and crash inside observe() (getBoundingClientRect of undefined)
+            if (!draggedEl) return;
             if (!originalDragTarget.parentElement) {
                 originalDragTarget.setAttribute(ORIGINAL_DRAGGED_ITEM_MARKER_ATTRIBUTE, true);
                 originDropZoneRoot.appendChild(originalDragTarget);
@@ -546,6 +562,7 @@ export function dndzone(node, options) {
         dropTargetClasses = [],
         transformDraggedElement = () => {},
         centreDraggedOnCursor = false,
+        useCursorForDetection = false,
         dropAnimationDisabled = false,
         delayTouchStart: delayTouchStartOpt = false
     }) {
@@ -568,6 +585,7 @@ export function dndzone(node, options) {
         config.morphDisabled = morphDisabled;
         config.transformDraggedElement = transformDraggedElement;
         config.centreDraggedOnCursor = centreDraggedOnCursor;
+        config.useCursorForDetection = useCursorForDetection;
         config.dropAnimationDisabled = dropAnimationDisabled;
 
         // realtime update for dropTargetStyle