fluid-dnd 2.2.1 → 2.4.0

package/dist/core/events/insert.js

@@ -0,0 +1,80 @@
+import { getParentDraggableChildren, getSiblings } from '../utils/GetStyles';
+import getTranslationByDragging from '../events/dragAndDrop/getTranslationByDraggingAndEvent';
+import { IsHTMLElement } from '../utils/typesCheckers';
+import { removeTempChild } from '../tempChildren';
+import { DISABLE_TRANSITION, DRAGGABLE_CLASS } from '../utils/classes';
+import { addClass, containClass, removeClass } from '../utils/dom/classList';
+import { isTempElement, observeMutation } from '../utils/observer';
+import { useChangeDraggableStyles } from './changeDraggableStyles';
+export default function useInsertEvents(currentConfig, parent, handlerPublisher, endDraggingAction) {
+    const { delayBeforeInsert } = currentConfig;
+    const [removeElementDraggingStyles, _, dragEventOverElement] = useChangeDraggableStyles(currentConfig, handlerPublisher, endDraggingAction);
+    // #region Insert
+    const emitInsertEventToSiblings = (targetIndex, draggedElement, droppable, value, startInserting) => {
+        const translation = getTranslationByDragging(draggedElement, 'insert', currentConfig.direction, droppable);
+        const { onInsertEvent } = currentConfig;
+        const siblings = getParentDraggableChildren(droppable);
+        for (const [index, sibling] of siblings.entries()) {
+            if (!containClass(sibling, DRAGGABLE_CLASS)) {
+                continue;
+            }
+            if (index >= targetIndex) {
+                dragEventOverElement(sibling, translation);
+            }
+        }
+        startInserting();
+        setTimeout(() => {
+            onInsertEvent(targetIndex, value);
+            onFinishInsertElement(targetIndex, droppable, currentConfig);
+            removeElementDraggingStyles(draggedElement);
+            removeTranslateFromSiblings(draggedElement, parent);
+            removeTempChild(parent, 0, true);
+        }, delayBeforeInsert);
+    };
+    const removeTranslateFromSiblings = (element, parent) => {
+        const [siblings] = getSiblings(element, parent);
+        for (const sibling of [...siblings, element]) {
+            removeTranslateWhitoutTransition(sibling);
+        }
+    };
+    const removeTranslateWhitoutTransition = (element) => {
+        if (IsHTMLElement(element)) {
+            element.style.transition = '';
+            element.style.transform = '';
+        }
+    };
+    return [emitInsertEventToSiblings];
+}
+const childrenMutationFilter = (mutation) => {
+    const addedNodes = mutation.addedNodes
+        .values()
+        .filter((element) => !isTempElement(element))
+        .toArray();
+    return addedNodes.length > 0;
+};
+const onFinishInsertElement = (targetIndex, droppable, config) => {
+    const { insertingFromClass, animationDuration } = config;
+    const observer = observeMutation(() => {
+        const siblings = getParentDraggableChildren(droppable);
+        const newElement = siblings[targetIndex];
+        addClass(newElement, insertingFromClass);
+        addClass(newElement, DISABLE_TRANSITION);
+        setTimeout(() => {
+            removeClass(newElement, DISABLE_TRANSITION);
+            removeClass(newElement, insertingFromClass);
+            observer.disconnect();
+        }, animationDuration);
+    }, droppable, {
+        childList: true
+    }, childrenMutationFilter);
+};
+export const insertToListEmpty = (config, droppable, targetIndex, value) => {
+    if (!droppable) {
+        return;
+    }
+    const { onInsertEvent, delayBeforeInsert } = config;
+    setTimeout(() => {
+        onInsertEvent(targetIndex, value);
+        onFinishInsertElement(targetIndex, droppable, config);
+    }, delayBeforeInsert);
+};

package/dist/core/events/remove.d.ts

@@ -0,0 +1,4 @@
+import { CoreConfig } from '..';
+import { DroppableConfig } from '../config/configHandler';
+import HandlerPublisher from '@/core/HandlerPublisher';
+export default function useRemoveEvents<T>(currentConfig: CoreConfig<T>, parent: HTMLElement, handlerPublisher: HandlerPublisher, endDraggingAction: () => void): readonly [(targetIndex: number, draggedElement: HTMLElement, droppableConfig: DroppableConfig<T>, onFinishRemoveEvent: (element: HTMLElement) => void) => void, (draggedElement: HTMLElement) => void];

package/dist/core/events/remove.js

@@ -0,0 +1,51 @@
+import { getSiblings } from '../utils/GetStyles';
+import { moveTranslate } from '../utils/SetStyles';
+import getTranslationByDragging from './dragAndDrop/getTranslationByDraggingAndEvent';
+import { IsHTMLElement } from '../utils/typesCheckers';
+import { removeTempChild } from '../tempChildren';
+import { useChangeDraggableStyles } from './changeDraggableStyles';
+export default function useRemoveEvents(currentConfig, parent, handlerPublisher, endDraggingAction) {
+    const { animationDuration } = currentConfig;
+    const [removeElementDraggingStyles] = useChangeDraggableStyles(currentConfig, handlerPublisher, endDraggingAction);
+    const emitRemoveEventToSiblings = (targetIndex, draggedElement, droppableConfig, onFinishRemoveEvent) => {
+        if (!droppableConfig || !droppableConfig.droppable || !droppableConfig.config) {
+            return;
+        }
+        const { droppable, config } = droppableConfig;
+        let [siblings] = getSiblings(draggedElement, droppable);
+        siblings = [draggedElement, ...siblings].toReversed();
+        const translation = getTranslationByDragging(draggedElement, 'remove', config.direction, droppable);
+        for (const [index, sibling] of siblings.entries()) {
+            if (index >= targetIndex) {
+                startDragEventOverElement(sibling, translation);
+                setTimeout(() => {
+                    onFinishRemoveEvent(sibling);
+                }, animationDuration);
+            }
+        }
+    };
+    const emitFinishRemoveEventToSiblings = (draggedElement) => {
+        removeTempChild(parent, animationDuration, true);
+        setTimeout(() => {
+            removeElementDraggingStyles(draggedElement);
+            removeTranslateFromSiblings(draggedElement, parent);
+        }, animationDuration);
+    };
+    const startDragEventOverElement = (element, translation) => {
+        const { width, height } = translation;
+        moveTranslate(element, height, width);
+    };
+    const removeTranslateFromSiblings = (element, parent) => {
+        const [siblings] = getSiblings(element, parent);
+        for (const sibling of [...siblings, element]) {
+            removeTranslateWhitoutTransition(sibling);
+        }
+    };
+    const removeTranslateWhitoutTransition = (element) => {
+        if (IsHTMLElement(element)) {
+            element.style.transition = '';
+            element.style.transform = '';
+        }
+    };
+    return [emitRemoveEventToSiblings, emitFinishRemoveEventToSiblings];
+}

package/dist/core/positioning/autoScroll.d.ts

@@ -0,0 +1,5 @@
+import { Coordinate, Direction } from '..';
+export declare const useScroll: (draggedElement: HTMLElement) => readonly [(direction: Direction, parent: HTMLElement, position: {
+    top: number;
+    left: number;
+}, translate: Coordinate) => void];

package/dist/core/positioning/autoScroll.js

@@ -0,0 +1,51 @@
+import { draggableIsCompleteOutside, getPropByDirection } from '../utils/GetStyles';
+const scrollByDirection = (element, direction, scrollAmount) => {
+    if (scrollAmount == 0) {
+        return;
+    }
+    if (direction === 'vertical') {
+        element.scrollBy(0, scrollAmount);
+    }
+    else {
+        element.scrollBy(scrollAmount, 0);
+    }
+};
+export const useScroll = (draggedElement) => {
+    let lastScrollAmount = 0.5;
+    const minScrollAmountDiff = 0.03;
+    const updateScrollByPosition = (direction, parent, position, translate) => {
+        const { before, distance, axis, getRect } = getPropByDirection(direction);
+        const distanceValue = getRect(draggedElement)[distance];
+        const parentBoundingClientRect = getRect(parent);
+        const positionInsideParent = position[before] - parentBoundingClientRect[before] + translate[axis];
+        const parentDistance = parentBoundingClientRect[distance];
+        const totalDistance = parentDistance - distanceValue;
+        const relativePosition = positionInsideParent / totalDistance;
+        const relativeDistanceValue = distanceValue / totalDistance;
+        const velocity = 0.25;
+        const infLimit = 0.2;
+        const upperLimit = 0.8;
+        let percent = 0;
+        const isOutside = draggableIsCompleteOutside(draggedElement, parent);
+        if (!isOutside && relativePosition < infLimit && relativePosition > -relativeDistanceValue) {
+            percent = scrollFuncionToStart(relativePosition < 0 ? 0 : relativePosition, infLimit);
+        }
+        else if (!isOutside &&
+            relativePosition > upperLimit &&
+            relativePosition < 1 + relativeDistanceValue) {
+            percent = scrollFuncionToEnd(relativePosition, upperLimit);
+        }
+        const scrollAmount = velocity * distanceValue * percent;
+        lastScrollAmount =
+            Math.sign(scrollAmount) *
+                Math.min(Math.abs(scrollAmount), Math.abs(lastScrollAmount) + minScrollAmountDiff);
+        scrollByDirection(parent, direction, lastScrollAmount);
+    };
+    const scrollFuncionToStart = (relativePosition, infLimit) => {
+        return Math.pow(relativePosition / infLimit, 1 / 3) - 1;
+    };
+    const scrollFuncionToEnd = (relativePosition, upperLimit) => {
+        return Math.pow((1 / (1 - upperLimit)) * (relativePosition - upperLimit), 3);
+    };
+    return [updateScrollByPosition];
+};

package/dist/core/{utils/SetTransform.d.ts → positioning/usePositioning.d.ts}

@@ -1,6 +1,6 @@
 import { DragMouseTouchEvent, TransformEvent } from '../../../index';
 import { CoordinateMap, Direction } from '..';
-export declare const useTransform: (draggedElement: HTMLElement, coordinateTransforms: CoordinateMap[]) => readonly [(element: HTMLElement, parent: HTMLElement, pagePosition: {
+export declare const usePositioning: (draggedElement: HTMLElement, coordinateTransforms: CoordinateMap[]) => readonly [(element: HTMLElement, parent: HTMLElement, pagePosition: {
     pageX: number;
     pageY: number;
 }, direction?: Direction) => void, (event: DragMouseTouchEvent, element: HTMLElement) => void];

package/dist/core/{utils/SetTransform.js → positioning/usePositioning.js}

@@ -1,12 +1,13 @@
-import { draggableIsOutside, getNearestFixedParentPosition, getPropByDirection, getValueFromProperty } from './GetStyles';
+import { getNearestFixedParentPosition, getPropByDirection, getValueFromProperty } from '../utils/GetStyles';
 import { HORIZONTAL, VERTICAL } from '..';
-import { scrollByDirection } from './scroll';
-import { HANDLER_CLASS, DRAGGING_CLASS } from './classes';
-import { containClass } from './dom/classList';
-export const useTransform = (draggedElement, coordinateTransforms) => {
+import { useScroll } from './autoScroll';
+import { HANDLER_CLASS, DRAGGING_CLASS } from '../utils/classes';
+import { containClass } from '../utils/dom/classList';
+export const usePositioning = (draggedElement, coordinateTransforms) => {
     let currentOffset = { offsetX: 0, offsetY: 0 };
     let position = { top: 0, left: 0 };
     let translate = { x: 0, y: 0 };
+    const [updateScrollByPosition] = useScroll(draggedElement);
     const updateTranform = (newTranslate) => {
         draggedElement.style.transform = `translate( ${newTranslate.x}px, ${newTranslate.y}px)`;
     };
@@ -41,31 +42,7 @@ export const useTransform = (draggedElement, coordinateTransforms) => {
         };
         const updateScroll = (translateDirection) => {
             if (element && containClass(element, DRAGGING_CLASS) && translateDirection === direction) {
-                const { before, distance, axis, getRect } = getPropByDirection(direction);
-                const distanceValue = getRect(element)[distance];
-                const parentBoundingClientRect = getRect(parent);
-                const positionInsideParent = position[before] - parentBoundingClientRect[before] + translate[axis];
-                const parentDistance = parentBoundingClientRect[distance];
-                const totalDistance = parentDistance - distanceValue;
-                const relativePosition = positionInsideParent / totalDistance;
-                const relativeDistanceValue = distanceValue / totalDistance;
-                const velocity = 0.1;
-                const infLimit = 0.2;
-                const upperLimit = 0.8;
-                let percent = 0;
-                const isOutside = draggableIsOutside(element, parent);
-                if (!isOutside &&
-                    relativePosition < infLimit &&
-                    relativePosition > -relativeDistanceValue) {
-                    percent = relativePosition / infLimit - 1;
-                }
-                else if (!isOutside &&
-                    relativePosition > upperLimit &&
-                    relativePosition < 1 + relativeDistanceValue) {
-                    percent = (1 / (1 - upperLimit)) * (relativePosition - upperLimit);
-                }
-                const scrollAmount = velocity * distanceValue * percent;
-                scrollByDirection(parent, direction, scrollAmount);
+                updateScrollByPosition(direction, parent, position, translate);
             }
         };
         const updateTranlateByDirection = (direction) => {

package/dist/core/{utils/tempChildren.d.ts → tempChildren.d.ts}

@@ -1,5 +1,4 @@
-import { DroppableConfig } from "../configHandler";
-export declare const isTempElement: (element: Node) => boolean;
+import { DroppableConfig } from './config/configHandler';
 export declare const addTempChild: <T>(draggedElement: HTMLElement | undefined, parent: Element, ifStartDragging: boolean, droppableConfig?: DroppableConfig<T>, addingAnimationDuration?: number) => void;
 export declare const addTempChildOnInsert: <T>(draggedElement: HTMLElement | undefined, ifStartDragging: boolean, droppableConfig?: DroppableConfig<T>) => void;
 export declare const removeTempChildrens: (droppable: HTMLElement, parent: HTMLElement, droppableGroupClass: string | null, animationDuration: number, draggedElementIsOutside?: boolean) => void;

package/dist/core/{utils/tempChildren.js → tempChildren.js}

@@ -1,22 +1,14 @@
-import { HORIZONTAL, VERTICAL } from "..";
-import { getPropByDirection } from "./GetStyles";
-import { getGapPixels } from "./ParseStyles";
-import { setSizeStyles, setTranistion } from "./SetStyles";
-import { observeMutation } from "./observer";
-import getTranslationByDragging from "./translate/GetTranslationByDraggingAndEvent";
-import { scrollPercent } from "./scroll";
-import { TEMP_CHILD_CLASS } from ".";
-import { addClass, getClassesSelector } from "./dom/classList";
-import { IsHTMLElement } from "./touchDevice";
-const START_DRAG_EVENT = "startDrag";
-const timingFunction = "cubic-bezier(0.2, 0, 0, 1)";
+import { HORIZONTAL, VERTICAL } from '.';
+import { getPropByDirection } from './utils/GetStyles';
+import { getGapPixels } from './utils/ParseStyles';
+import { setSizeStyles, setTranistion } from './utils/SetStyles';
+import { observeMutation } from './utils/observer';
+import getTranslationByDragging from './events/dragAndDrop/getTranslationByDraggingAndEvent';
+import { TEMP_CHILD_CLASS } from './utils';
+import { addClass, getClassesSelector } from './utils/dom/classList';
+const START_DRAG_EVENT = 'startDrag';
+const timingFunction = 'cubic-bezier(0.2, 0, 0, 1)';
 const DELAY_TIME = 50;
-export const isTempElement = (element) => {
-    if (!IsHTMLElement(element)) {
-        return false;
-    }
-    return element.classList.contains(TEMP_CHILD_CLASS);
-};
 const getDistance = (droppable, draggedElement, direction) => {
     let distances = getTranslationByDragging(draggedElement, START_DRAG_EVENT, direction, droppable);
     const gap = getGapPixels(droppable, direction);
@@ -29,10 +21,7 @@ const getDistance = (droppable, draggedElement, direction) => {
 const getlarge = (direction, draggedElement) => {
     const largeDirection = direction == HORIZONTAL ? VERTICAL : HORIZONTAL;
     const { distance, getRect } = getPropByDirection(largeDirection);
-    return [
-        getRect(draggedElement)[distance],
-        distance,
-    ];
+    return [getRect(draggedElement)[distance], distance];
 };
 const setSizes = (element, height, width) => {
     setSizeStyles(element, height, width);
@@ -47,6 +36,10 @@ const updateChildAfterCreated = (child, droppable, distances) => {
         observer.disconnect();
     };
 };
+const scrollPercent = (direction, droppable, droppableScroll) => {
+    const { scrollDistance, clientDistance, scrollElement } = getPropByDirection(direction);
+    return droppableScroll[scrollElement] / (droppable[scrollDistance] - droppable[clientDistance]);
+};
 const fixScrollInitialChange = (droppableConfig, ifStartDragging) => {
     if (!ifStartDragging) {
         return;
@@ -56,8 +49,7 @@ const fixScrollInitialChange = (droppableConfig, ifStartDragging) => {
     const scrollCompleted = scrollPercent(config.direction, droppable, scroll) > 0.99;
     const { scrollDistance, clientDistance, scrollElement } = getPropByDirection(direction);
     if (scrollCompleted) {
-        droppable[scrollElement] =
-            droppable[scrollDistance] - droppable[clientDistance];
+        droppable[scrollElement] = droppable[scrollDistance] - droppable[clientDistance];
     }
 };
 const getTempChild = (draggedElement, ifStartDragging, droppableConfig, addingAnimationDuration) => {
@@ -70,12 +62,12 @@ const getTempChild = (draggedElement, ifStartDragging, droppableConfig, addingAn
     if (droppable.querySelector(`.${TEMP_CHILD_CLASS}`) || !draggedElement) {
         return;
     }
-    var tempChildTag = draggedElement.tagName == "LI" ? "DIV" : draggedElement.tagName;
+    var tempChildTag = draggedElement.tagName == 'LI' ? 'DIV' : draggedElement.tagName;
     var child = document.createElement(tempChildTag);
     addClass(child, TEMP_CHILD_CLASS);
     setSizes(child, 0, 0);
     const distances = getDistance(droppable, draggedElement, direction);
-    setTranistion(child, addingAnimationDuration ?? animationDuration, timingFunction, "width, min-width, height");
+    setTranistion(child, addingAnimationDuration ?? animationDuration, timingFunction, 'width, min-width, height');
     return [child, distances, droppable];
 };
 export const addTempChild = (draggedElement, parent, ifStartDragging, droppableConfig, addingAnimationDuration) => {
@@ -89,7 +81,7 @@ export const addTempChild = (draggedElement, parent, ifStartDragging, droppableC
     }
     observeMutation(updateChildAfterCreated(child, droppable, distances), droppable, {
         childList: true,
-        subtree: true,
+        subtree: true
     });
     droppable.appendChild(child);
 };
@@ -106,7 +98,7 @@ const setSizeAfterAppendChild = (child, size) => {
     return requestAnimationFrame(() => {
         setSizes(child, size.height, size.width);
         requestAnimationFrame(() => {
-            setTranistion(child, 0, timingFunction, "width, min-width, height");
+            setTranistion(child, 0, timingFunction, 'width, min-width, height');
         });
     });
 };
@@ -117,7 +109,8 @@ export const removeTempChildrens = (droppable, parent, droppableGroupClass, anim
     var children = document.querySelectorAll(`${getClassesSelector(droppableGroupClass)} > .${TEMP_CHILD_CLASS}`);
     children.forEach((tempChild) => {
         const childParent = tempChild.parentElement;
-        if ((childParent?.isSameNode(parent) || !draggedElementIsOutside && childParent?.isSameNode(droppable))) {
+        if (childParent?.isSameNode(parent) ||
+            (!draggedElementIsOutside && childParent?.isSameNode(droppable))) {
             return;
         }
         const tempChildElement = tempChild;

package/dist/core/useDraggable.js

@@ -1,13 +1,15 @@
 import { assignDraggingEvent, convetEventToDragMouseTouchEvent, moveTranslate, setCustomFixedSize, setEventWithInterval, setTranistion } from './utils/SetStyles';
-import { useTransform } from './utils/SetTransform';
-import useEmitEvents from './utils/events/emitEvents';
+import { usePositioning } from './positioning/usePositioning';
+import useRemoveEvents from './events/remove';
 import { DRAG_EVENT, draggableTargetTimingFunction, START_DRAG_EVENT, START_DROP_EVENT } from './utils';
-import ConfigHandler from './configHandler';
-import { IsHTMLElement, isTouchEvent } from './utils/touchDevice';
-import { addTempChild, addTempChildOnInsert, removeTempChildrens } from './utils/tempChildren';
-import { DroppableConfigurator } from './utils/droppableConfigurator';
+import ConfigHandler from './config/configHandler';
+import { IsHTMLElement, isTouchEvent } from './utils/typesCheckers';
+import { addTempChild, addTempChildOnInsert, removeTempChildrens } from './tempChildren';
+import { DroppableConfigurator } from './config/droppableConfigurator';
 import { addClass, containClass, getClassesList, getClassesSelector, removeClass, toggleClass } from './utils/dom/classList';
 import { DRAGGABLE_CLASS, DRAGGING_CLASS, DROPPABLE_CLASS, HANDLER_CLASS } from './utils/classes';
+import useDragAndDropEvents from './events/dragAndDrop/dragAndDrop';
+import useInsertEvents from './events/insert';
 var DraggingState;
 (function (DraggingState) {
     DraggingState[DraggingState["NOT_DRAGGING"] = 0] = "NOT_DRAGGING";
@@ -28,11 +30,13 @@ export default function useDraggable(draggableElement, index, config, parent, ha
     let pagePosition = { pageX: 0, pageY: 0 };
     let delayTimeout;
     let initialTouch;
-    const [setTransform, updateTransformState] = useTransform(draggableElement, coordinateTransform);
+    const [setTransform, updateTransformState] = usePositioning(draggableElement, coordinateTransform);
     const endDraggingState = () => {
         draggingState = DraggingState.NOT_DRAGGING;
     };
-    const [emitEventToSiblings, emitRemoveEventToSiblings, emitInsertEventToSiblings, emitFinishRemoveEventToSiblings, toggleDraggingClass] = useEmitEvents(config, index, parent, droppableGroupClass, handlerPublisher, endDraggingState);
+    const [emitRemoveEventToSiblings, emitFinishRemoveEventToSiblings] = useRemoveEvents(config, parent, handlerPublisher, endDraggingState);
+    const [emitDraggingEvent, emitDroppingEvent, toggleDraggingClass] = useDragAndDropEvents(config, index, parent, droppableGroupClass, handlerPublisher, endDraggingState);
+    const [emitInsertEventToSiblings] = useInsertEvents(config, parent, handlerPublisher, endDraggingState);
     const setDraggable = () => {
         addClass(draggableElement, DRAGGABLE_CLASS);
     };
@@ -99,13 +103,13 @@ export default function useDraggable(draggableElement, index, config, parent, ha
         }
         const { droppable, config } = droppableConfigurator.current;
         setTransform(draggableElement, droppable, pagePosition, config.direction);
-        emitEventToSiblings(draggableElement, DRAG_EVENT, windowScroll, droppableConfigurator.current);
+        emitDraggingEvent(draggableElement, DRAG_EVENT, droppableConfigurator.current);
     };
     const changeDroppable = (newdDroppableConfig, oldDroppableConfig) => {
         if (oldDroppableConfig &&
             draggingState == DraggingState.DRAGING &&
             !newdDroppableConfig?.droppable.isSameNode(oldDroppableConfig.droppable)) {
-            emitEventToSiblings(draggableElement, DRAG_EVENT, windowScroll, oldDroppableConfig);
+            emitDraggingEvent(draggableElement, DRAG_EVENT, oldDroppableConfig);
         }
     };
     const droppableConfigurator = new DroppableConfigurator(draggableElement, droppableGroupClass, parent, setTransformDragEvent, changeDroppable, config.mapFrom);
@@ -256,7 +260,7 @@ export default function useDraggable(draggableElement, index, config, parent, ha
     const startDragging = (event) => {
         addTempChild(draggableElement, parent, draggingState == DraggingState.START_DRAGGING, droppableConfigurator.current);
         updateDraggingStateBeforeDragging();
-        emitEventToSiblings(draggableElement, START_DRAG_EVENT, windowScroll, droppableConfigurator.current);
+        emitDraggingEvent(draggableElement, START_DRAG_EVENT, droppableConfigurator.current);
         setDraggingStyles(draggableElement);
         updateTransformState(event, draggableElement);
     };
@@ -282,7 +286,7 @@ export default function useDraggable(draggableElement, index, config, parent, ha
         draggingState = DraggingState.END_DRAGGING;
         removeDraggingStyles(draggableElement);
         if (draggableElement.classList.contains(DRAGGING_CLASS)) {
-            emitEventToSiblings(draggableElement, START_DROP_EVENT, windowScroll, isOutsideAllDroppables ? droppableConfigurator.initial : droppableConfigurator.current, index);
+            emitDroppingEvent(draggableElement, START_DROP_EVENT, isOutsideAllDroppables ? droppableConfigurator.initial : droppableConfigurator.current, windowScroll, index);
         }
     };
     const removeDraggingStyles = (element) => {

package/dist/core/utils/GetStyles.d.ts

@@ -1,5 +1,5 @@
-import { Direction } from "..";
-import { BeforeMargin, AfterMargin, BorderWidth, PaddingBefore, Before } from "../../../index";
+import { Direction } from '..';
+import { BeforeMargin, AfterMargin, BorderWidth, PaddingBefore, Before } from '../../../index';
 export declare const getWindowScroll: () => {
     scrollX: number;
     scrollY: number;
@@ -11,7 +11,7 @@ export declare const getTransform: (element: Element) => {
     y: number;
 };
 export declare const draggableIsOutside: (draggable: Element, droppable: Element) => boolean;
-export declare const hasIntersection: (element1: Element, element2: Element) => boolean;
+export declare const draggableIsCompleteOutside: (draggable: Element, droppable: Element) => boolean;
 export declare const getValueFromProperty: (element: HTMLElement | Element | undefined | null, property: PaddingBefore | BorderWidth | BeforeMargin | AfterMargin | Before) => number;
 export declare const getScrollElement: (element: HTMLElement) => {
     scrollLeft: number;

package/dist/core/utils/GetStyles.js

@@ -1,12 +1,12 @@
-import { HORIZONTAL, VERTICAL } from "..";
-import { DRAGGABLE_CLASS } from "./classes";
-import { containClass } from "./dom/classList";
+import { HORIZONTAL, VERTICAL } from '..';
+import { DRAGGABLE_CLASS } from './classes';
+import { containClass } from './dom/classList';
 export const getWindowScroll = () => {
     const { scrollX, scrollY } = window;
     return { scrollX, scrollY };
 };
 export const parseFloatEmpty = (value) => {
-    if (!value || value.trim().length == 0 || value == "normal") {
+    if (!value || value.trim().length == 0 || value == 'normal') {
         return 0;
     }
     return parseFloat(value);
@@ -22,7 +22,7 @@ export const getTransform = (element) => {
     const matrix = new DOMMatrixReadOnly(style.transform);
     return {
         x: matrix.m41,
-        y: matrix.m42,
+        y: matrix.m42
     };
 };
 const intersection = (firstInterval, secondInterval) => {
@@ -40,22 +40,38 @@ const intersection = (firstInterval, secondInterval) => {
 export const draggableIsOutside = (draggable, droppable) => {
     return !hasIntersection(draggable, droppable);
 };
-export const hasIntersection = (element1, element2) => {
+const hasIntersection = (element1, element2) => {
+    const { intersectionX, intersectionY, rect1, rect2 } = getIntersection(element1, element2);
+    return (intersectionY >= Math.min(rect1.height, rect2.height) / 2 &&
+        intersectionX >= Math.min(rect1.width, rect2.width) / 2);
+};
+export const draggableIsCompleteOutside = (draggable, droppable) => {
+    return !hasCompleteIntersection(draggable, droppable);
+};
+const hasCompleteIntersection = (element1, element2) => {
+    const { intersectionX, intersectionY } = getIntersection(element1, element2);
+    return intersectionY >= 0 && intersectionX >= 0;
+};
+const getIntersection = (element1, element2) => {
     const rect1 = getRect(element1);
     const rect2 = getRect(element2);
     const intersectionY = intersectionByDirection(rect1, rect2, VERTICAL);
     const intersectionX = intersectionByDirection(rect1, rect2, HORIZONTAL);
-    return (intersectionY >= Math.min(rect1.height, rect2.height) / 2 &&
-        intersectionX >= Math.min(rect1.width, rect2.width) / 2);
+    return {
+        rect1,
+        rect2,
+        intersectionX,
+        intersectionY
+    };
 };
 const intersectionByDirection = (rect1, rect2, direction) => {
     const { before, distance } = getPropByDirection(direction);
     return intersection({
         x1: rect1[before],
-        x2: rect1[before] + rect1[distance],
+        x2: rect1[before] + rect1[distance]
     }, {
         x1: rect2[before],
-        x2: rect2[before] + rect2[distance],
+        x2: rect2[before] + rect2[distance]
     });
 };
 export const getValueFromProperty = (element, property) => {
@@ -74,22 +90,22 @@ const getRect = (element) => {
 export const getPropByDirection = (direction) => {
     const ifHorizontal = direction == HORIZONTAL;
     return {
-        beforeMargin: ifHorizontal ? "marginLeft" : "marginTop",
-        afterMargin: ifHorizontal ? "marginRight" : "marginBottom",
-        borderBeforeWidth: ifHorizontal ? "borderLeftWidth" : "borderTopWidth",
-        before: ifHorizontal ? "left" : "top",
-        after: ifHorizontal ? "right" : "down",
-        gap: ifHorizontal ? "columnGap" : "rowGap",
-        distance: ifHorizontal ? "width" : "height",
-        axis: ifHorizontal ? "x" : "y",
-        offset: ifHorizontal ? "offsetX" : "offsetY",
-        scroll: ifHorizontal ? "scrollX" : "scrollY",
-        scrollElement: ifHorizontal ? "scrollLeft" : "scrollTop",
-        page: ifHorizontal ? "pageX" : "pageY",
-        inner: ifHorizontal ? "innerWidth" : "innerHeight",
-        offsetElement: ifHorizontal ? "offsetLeft" : "offsetTop",
-        scrollDistance: ifHorizontal ? "scrollWidth" : "scrollHeight",
-        clientDistance: ifHorizontal ? "clientWidth" : "clientHeight",
+        beforeMargin: ifHorizontal ? 'marginLeft' : 'marginTop',
+        afterMargin: ifHorizontal ? 'marginRight' : 'marginBottom',
+        borderBeforeWidth: ifHorizontal ? 'borderLeftWidth' : 'borderTopWidth',
+        before: ifHorizontal ? 'left' : 'top',
+        after: ifHorizontal ? 'right' : 'down',
+        gap: ifHorizontal ? 'columnGap' : 'rowGap',
+        distance: ifHorizontal ? 'width' : 'height',
+        axis: ifHorizontal ? 'x' : 'y',
+        offset: ifHorizontal ? 'offsetX' : 'offsetY',
+        scroll: ifHorizontal ? 'scrollX' : 'scrollY',
+        scrollElement: ifHorizontal ? 'scrollLeft' : 'scrollTop',
+        page: ifHorizontal ? 'pageX' : 'pageY',
+        inner: ifHorizontal ? 'innerWidth' : 'innerHeight',
+        offsetElement: ifHorizontal ? 'offsetLeft' : 'offsetTop',
+        scrollDistance: ifHorizontal ? 'scrollWidth' : 'scrollHeight',
+        clientDistance: ifHorizontal ? 'clientWidth' : 'clientHeight',
         paddingBefore: ifHorizontal ? 'paddingLeft' : 'paddingTop',
         getRect
     };
@@ -104,21 +120,15 @@ export const getGroupDroppables = (currentDroppable, droppableGroup) => {
     return Array.from(document.querySelectorAll(`.droppable-group-${droppableGroup}`));
 };
 export const getParentDraggableChildren = (parent) => {
-    const siblings = [...parent.children]
-        .filter((child) => containClass(child, DRAGGABLE_CLASS));
+    const siblings = [...parent.children].filter((child) => containClass(child, DRAGGABLE_CLASS));
     return siblings;
 };
 export const getSiblingsByParent = (current, parent) => {
     const siblings = [...parent.children]
-        .filter((child) => containClass(child, DRAGGABLE_CLASS) &&
-        !child.isEqualNode(current))
+        .filter((child) => containClass(child, DRAGGABLE_CLASS) && !child.isEqualNode(current))
         .toReversed();
     const positionOnDroppable = [...parent.children].findLastIndex((child) => child.isEqualNode(current));
-    return [
-        siblings,
-        positionOnDroppable,
-        parent,
-    ];
+    return [siblings, positionOnDroppable, parent];
 };
 const getNearestFixedParent = (element) => {
     let parent = element.parentElement;
@@ -134,5 +144,7 @@ const getNearestFixedParent = (element) => {
 export const getNearestFixedParentPosition = (element, direction) => {
     const { before, borderBeforeWidth } = getPropByDirection(direction);
     const fixedParent = getNearestFixedParent(element);
-    return fixedParent ? (getRect(fixedParent)[before] + getValueFromProperty(fixedParent, borderBeforeWidth)) : 0;
+    return fixedParent
+        ? getRect(fixedParent)[before] + getValueFromProperty(fixedParent, borderBeforeWidth)
+        : 0;
 };

package/dist/core/utils/SetStyles.d.ts

@@ -1,8 +1,8 @@
-import { DragMouseTouchEvent, fixedSize } from "../../../index";
-type onTouchEvent = "ontouchstart" | "ontouchmove" | "ontouchend";
+import { DragMouseTouchEvent, fixedSize } from '../../../index';
+type onTouchEvent = 'ontouchstart' | 'ontouchmove' | 'ontouchend';
 declare const onMouseEvents: readonly ["onmouseup", "onmousedown", "onmousemove"];
 type onMouseEvent = (typeof onMouseEvents)[number];
-type TouchEventType = "touchstart" | "touchmove" | "touchend";
+type TouchEventType = 'touchstart' | 'touchmove' | 'touchend';
 declare const mouseEvents: readonly ["mouseup", "mousedown", "mousemove"];
 type MouseEventType = (typeof mouseEvents)[number];
 type DragEventCallback = (event: DragMouseTouchEvent) => void;