fluid-dnd 2.0.1 → 2.0.2

package/dist/core/utils/droppableConfigurator.js

@@ -0,0 +1,106 @@
+import ConfigHandler from "../configHandler";
+import { draggableIsOutside } from "./GetStyles";
+import { IsHTMLElement } from "./touchDevice";
+import { setEventWithInterval } from "./SetStyles";
+import { getClassesSelector } from "./dom/classList";
+import { MapConfig } from "./config";
+export class DroppableConfigurator {
+    initial;
+    current;
+    parent;
+    draggableElement;
+    groupClass;
+    dragEvent;
+    changeDroppable;
+    mapFrom;
+    constructor(draggableElement, droppableGroupClass, parent, setTransformDragEvent, changeDroppable, mapFrom) {
+        this.parent = parent;
+        this.draggableElement = draggableElement;
+        this.groupClass = droppableGroupClass;
+        this.dragEvent = setTransformDragEvent;
+        this.mapFrom = mapFrom;
+        this.initial = parent ? ConfigHandler.getConfig(parent) : undefined;
+        this.changeDroppable = changeDroppable;
+    }
+    getDraggableAncestor(clientX, clientY, draggable) {
+        return document
+            .elementsFromPoint(clientX, clientY)
+            .filter((element) => !element.isSameNode(draggable));
+    }
+    getElementBelow(currentElement, event, hiddenDraggable = true) {
+        const getElementBelow = (config) => {
+            const [elementBelow] = config.getDraggableAncestor(event.clientX, event.clientY, currentElement);
+            return elementBelow;
+        };
+        let elementBelow = null;
+        if (hiddenDraggable) {
+            currentElement.hidden = true;
+            elementBelow = getElementBelow(this);
+            currentElement.hidden = false;
+        }
+        else {
+            elementBelow = getElementBelow(this);
+        }
+        return elementBelow;
+    }
+    getCurrent(currentElement, event, hiddenDraggable = true) {
+        const elementBelow = this.getElementBelow(currentElement, event, hiddenDraggable);
+        if (!this.groupClass || !elementBelow) {
+            return;
+        }
+        const currentDroppable = elementBelow.closest(getClassesSelector(this.groupClass));
+        return currentDroppable;
+    }
+    isOutsideOfAllDroppables(currentElement) {
+        const droppables = this.groupClass ? Array.from(document.querySelectorAll(getClassesSelector(this.groupClass))) : [this.parent];
+        return droppables.every((droppable) => draggableIsOutside(currentElement, droppable));
+    }
+    isNotInsideAnotherDroppable(currentElement, droppable) {
+        const isOutside = draggableIsOutside(currentElement, droppable);
+        return !isOutside || this.isOutsideOfAllDroppables(currentElement);
+    }
+    onScrollEvent() {
+        this.dragEvent();
+    }
+    ;
+    setOnScroll(droppable) {
+        setEventWithInterval(droppable, "onscroll", () => { this.onScrollEvent(); });
+    }
+    getConfigFrom(element) {
+        const coreConfig = ConfigHandler.getConfig(element);
+        if (!coreConfig) {
+            return undefined;
+        }
+        if (element.isSameNode(this.parent)) {
+            return coreConfig;
+        }
+        return {
+            ...coreConfig,
+            config: MapConfig(coreConfig, this.mapFrom)
+        };
+    }
+    getCurrentConfig(event) {
+        const currentElement = this.draggableElement;
+        if (this.current &&
+            this.isNotInsideAnotherDroppable(currentElement, this.current?.droppable)) {
+            return this.current;
+        }
+        const currentDroppable = this.getCurrent(currentElement, event);
+        if (!currentDroppable) {
+            return this.getConfigFrom(this.parent);
+        }
+        if (IsHTMLElement(currentDroppable) && !currentDroppable.onscroll) {
+            this.setOnScroll(currentDroppable);
+        }
+        return this.getConfigFrom(currentDroppable);
+    }
+    updateConfig(event) {
+        const oldDroppableConfig = this.current;
+        this.current = this.getCurrentConfig(event);
+        this.changeDroppable(this.current, oldDroppableConfig);
+    }
+    isOutside(event, hiddenDraggable = true) {
+        const currentElement = this.draggableElement;
+        return !Boolean(this.getCurrent(currentElement, event, hiddenDraggable));
+    }
+}

package/dist/core/utils/events/emitEvents.d.ts

@@ -1,9 +1,8 @@
-import { WindowScroll } from '../../../../index';
-import { CoreConfig } from '../..';
-import { DRAG_EVENT, START_DRAG_EVENT, START_DROP_EVENT } from '..';
-import { DroppableConfig } from '../../configHandler';
-import { default as HandlerPublisher } from '../../HandlerPublisher';
-
+import { WindowScroll } from "../../../../index";
+import { CoreConfig } from "../..";
+import { DRAG_EVENT, START_DRAG_EVENT, START_DROP_EVENT } from "..";
+import { DroppableConfig } from "../../configHandler";
+import HandlerPublisher from '../../HandlerPublisher';
 type DraggingEvent = typeof DRAG_EVENT | typeof START_DRAG_EVENT;
 type DragAndDropEvent = DraggingEvent | DropEvent;
 type DropEvent = "drop" | typeof START_DROP_EVENT;

package/dist/core/utils/events/emitEvents.js

@@ -0,0 +1,333 @@
+import { draggableIsOutside, getParentDraggableChildren, getPropByDirection, getSiblings, getTransform, getWindowScroll, } from "../GetStyles";
+import { moveTranslate, setCustomFixedSize, setTranistion } from "../SetStyles";
+import getTranslationByDragging from "../translate/GetTranslationByDraggingAndEvent";
+import getTranslateBeforeDropping from "../translate/GetTranslateBeforeDropping";
+import { DRAG_EVENT, draggableTargetTimingFunction, IsDropEvent, START_DRAG_EVENT, START_DROP_EVENT, TEMP_CHILD_CLASS } from "..";
+import { IsHTMLElement } from "../touchDevice";
+import { isTempElement, removeTempChild } from "../tempChildren";
+import { DISABLE_TRANSITION, DRAGGABLE_CLASS, DRAGGING_CLASS, DRAGGING_HANDLER_CLASS, DROPPING_CLASS, GRABBING_CLASS } from "../classes";
+import { addClass, containClass, getClassesSelector, removeClass, toggleClass } from "../dom/classList";
+import { observeMutation } from "../observer";
+const DELAY_TIME_TO_SWAP = 50;
+export default function useEmitEvents(currentConfig, index, parent, droppableGroupClass, handlerPublisher, endDraggingAction) {
+    let actualIndex = index;
+    const { direction, handlerSelector, onRemoveAtEvent, animationDuration, delayBeforeInsert, draggingClass } = currentConfig;
+    const emitEventToSiblings = (draggedElement, event, initialWindowScroll, droppableConfig, positionOnSourceDroppable) => {
+        if (!droppableConfig) {
+            return;
+        }
+        const { droppable, config } = droppableConfig;
+        const tranlation = getTranslationByDragging(draggedElement, event, config.direction, droppable);
+        const dropping = IsDropEvent(event);
+        if (!dropping) {
+            emitDraggingEventToSiblings(draggedElement, event, tranlation, droppableConfig);
+        }
+        else {
+            emitDroppingEventToSiblings(draggedElement, event, tranlation, initialWindowScroll, droppableConfig, positionOnSourceDroppable);
+        }
+    };
+    // #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);
+    };
+    // #region Remove
+    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);
+    };
+    // #region Drag events
+    const emitDraggingEventToSiblings = (draggedElement, event, translation, droppableConfig) => {
+        const { config, droppable } = droppableConfig;
+        const [siblings] = getSiblings(draggedElement, droppable);
+        const isOutside = draggableIsOutside(draggedElement, droppable);
+        if (siblings.length == 0) {
+            updateActualIndexBaseOnTranslation(translation, 1, config.direction, siblings);
+        }
+        for (const [index, sibling] of siblings.entries()) {
+            if (!containClass(sibling, DRAGGABLE_CLASS)) {
+                continue;
+            }
+            const siblingTransition = canChangeDraggable(config.direction, draggedElement, sibling, translation);
+            if (!isOutside && siblingTransition) {
+                translation = siblingTransition;
+            }
+            else if (!isOutside) {
+                continue;
+            }
+            const siblingRealIndex = siblings.length - index;
+            updateActualIndexBaseOnTranslation(translation, siblingRealIndex, config.direction, siblings);
+            if (event === START_DRAG_EVENT) {
+                startDragEventOverElement(sibling, translation);
+            }
+            else if (event === DRAG_EVENT) {
+                dragEventOverElement(sibling, translation);
+            }
+        }
+    };
+    const canChangeDraggable = (direction, sourceElement, targetElement, translation) => {
+        const { before, distance, axis, getRect } = getPropByDirection(direction);
+        const currentBoundingClientRect = getRect(sourceElement);
+        const targetBoundingClientRect = getRect(targetElement);
+        const currentPosition = currentBoundingClientRect[before];
+        const targetPosition = targetBoundingClientRect[before];
+        const targetSize = targetBoundingClientRect[distance];
+        const targetMiddle = targetPosition + targetSize / 2;
+        const targetTransform = getTransform(targetElement)[axis];
+        const targetMiddleWithoutTransform = targetMiddle - targetTransform;
+        if (currentPosition > targetMiddleWithoutTransform) {
+            return { height: 0, width: 0 };
+        }
+        return translation;
+    };
+    const updateActualIndexBaseOnTranslation = (translation, siblingIndex, direction, siblings) => {
+        const itemsCount = siblings.filter((sibling) => containClass(sibling, DRAGGABLE_CLASS)).length;
+        const { distance } = getPropByDirection(direction);
+        if (translation[distance] == 0) {
+            actualIndex = Math.max(actualIndex, siblingIndex);
+        }
+        else {
+            actualIndex = Math.min(actualIndex, siblingIndex - 1);
+        }
+        actualIndex = Math.min(actualIndex, itemsCount);
+    };
+    const startDragEventOverElement = (element, translation) => {
+        const { width, height } = translation;
+        moveTranslate(element, height, width);
+    };
+    const dragEventOverElement = (element, translation) => {
+        const { width, height } = translation;
+        moveTranslate(element, height, width);
+        setTranistion(element, animationDuration, draggableTargetTimingFunction);
+    };
+    // #region Drop events
+    const emitDroppingEventToSiblings = (draggedElement, event, translation, initialWindowScroll, droppableConfig, positionOnSourceDroppable) => {
+        const { droppable, scroll, config } = droppableConfig;
+        const [siblings, positionOnDroppable] = getSiblings(draggedElement, droppable);
+        const allSiblings = siblings.toReversed();
+        const realPositionOnDroppable = (positionOnDroppable === -1) ? allSiblings.length : positionOnDroppable;
+        allSiblings.splice(realPositionOnDroppable, 0, draggedElement);
+        const [previousElement, nextElement, targetIndex] = getPreviousAndNextElement(draggedElement, positionOnDroppable, allSiblings, droppable);
+        translation = getTranslationByDragging(draggedElement, event, config.direction, parent, previousElement, nextElement);
+        const windowScroll = getWindowScroll();
+        const draggableTranslation = getTranslateBeforeDropping(config.direction, allSiblings, positionOnDroppable, targetIndex, windowScroll, scroll, initialWindowScroll, droppable, draggedElement);
+        if (siblings.length == 0) {
+            startDropEventOverElement(undefined, translation, draggedElement, draggableTranslation);
+        }
+        for (const [index, sibling] of siblings.toReversed().entries()) {
+            let newTranslation = translation;
+            if (targetIndex - 1 >= index) {
+                newTranslation = { height: 0, width: 0 };
+            }
+            if (event === START_DROP_EVENT &&
+                !containClass(sibling, TEMP_CHILD_CLASS)) {
+                startDropEventOverElement(sibling, newTranslation, draggedElement, draggableTranslation);
+            }
+        }
+        dropEventOverElement(targetIndex, draggedElement, config, droppable, positionOnSourceDroppable);
+    };
+    const getPreviousAndNextElement = (draggedElement, elementPosition, allSiblings, droppable) => {
+        const isOutside = draggableIsOutside(draggedElement, droppable);
+        const targetIndex = isOutside ? elementPosition : actualIndex;
+        const getPreviousAndNextElementIndex = () => {
+            if (elementPosition < targetIndex) {
+                return [targetIndex, targetIndex + 1];
+            }
+            else if (elementPosition > targetIndex) {
+                return [targetIndex - 1, targetIndex];
+            }
+            else {
+                return [targetIndex - 1, targetIndex + 1];
+            }
+        };
+        const [previousIndex, nextIndex] = getPreviousAndNextElementIndex();
+        const previousElement = allSiblings[previousIndex] ?? null;
+        const nextElement = allSiblings[nextIndex] ?? null;
+        return [
+            previousElement,
+            nextElement,
+            targetIndex,
+        ];
+    };
+    const startDropEventOverElement = (targetElement, translation, element, sourceElementTranlation) => {
+        moveTranslate(targetElement, translation.height, translation.width);
+        moveTranslate(element, sourceElementTranlation.height, sourceElementTranlation.width);
+    };
+    const dropEventOverElement = (targetIndex, element, config, droppable, positionOnSourceDroppable) => {
+        const { onInsertEvent, onDragEnd } = config;
+        addClass(element, DROPPING_CLASS);
+        removeStytes(element, parent, droppable, () => {
+            removeClass(element, DROPPING_CLASS);
+            if (positionOnSourceDroppable != undefined) {
+                const value = onRemoveAtEvent(positionOnSourceDroppable, true);
+                if (value != undefined) {
+                    onInsertEvent(targetIndex, value, true);
+                    onDragEnd({ value, index: targetIndex });
+                }
+                manageDraggingClass(element);
+                clearExcessTranslateStyles();
+            }
+        });
+    };
+    const clearExcessTranslateStyles = () => {
+        if (!droppableGroupClass) {
+            return;
+        }
+        var children = document.querySelectorAll(`${getClassesSelector(droppableGroupClass)} > .${DRAGGABLE_CLASS}`);
+        for (const element of children) {
+            removeTranslateWhitoutTransition(element);
+        }
+    };
+    const manageDraggingClass = (element) => {
+        setTimeout(() => {
+            removeClass(element, draggingClass);
+        }, DELAY_TIME_TO_SWAP);
+    };
+    const removeStytes = (element, parent, droppable, func) => {
+        setTimeout(() => {
+            func && func();
+            removeTempChildOnDroppables(parent, droppable);
+            reduceTempchildSize(droppable);
+            removeElementDraggingStyles(element);
+            removeTranslateFromSiblings(element, parent);
+            removeTranslateFromSiblings(element, droppable);
+        }, animationDuration);
+    };
+    const removeTempChildOnDroppables = (parent, droppable) => {
+        if (parent.isSameNode(droppable)) {
+            removeTempChild(parent, animationDuration);
+        }
+        else {
+            removeTempChild(parent, animationDuration, true);
+            removeTempChild(droppable, animationDuration);
+        }
+    };
+    const reduceTempchildSize = (droppable) => {
+        if (parent.isSameNode(droppable)) {
+            return;
+        }
+        var [lastChildren] = parent.querySelectorAll(`.${TEMP_CHILD_CLASS}`);
+        if (!lastChildren) {
+            return;
+        }
+        const { distance } = getPropByDirection(direction);
+        if (IsHTMLElement(lastChildren)) {
+            lastChildren.style[distance] = "0px";
+        }
+    };
+    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 = "";
+        }
+    };
+    const removeElementDraggingStyles = (element) => {
+        endDraggingAction();
+        toggleDraggingClass(element, false);
+        element.style.transform = "";
+        element.style.transition = "";
+        element.style.top = "";
+        element.style.left = "";
+        setCustomFixedSize(element, {
+            fixedHeight: '',
+            fixedWidth: ''
+        });
+    };
+    const toogleHandlerDraggingClass = (force, element) => {
+        const handlerElement = element.querySelector(handlerSelector);
+        toggleClass(document.body, GRABBING_CLASS, force);
+        if (handlerElement) {
+            toggleClass(handlerElement, DRAGGING_HANDLER_CLASS, force);
+        }
+        else {
+            toggleClass(element, DRAGGING_HANDLER_CLASS, force);
+        }
+    };
+    const toggleDraggingClass = (element, force) => {
+        toggleClass(element, DRAGGING_CLASS, force);
+        toogleHandlerDraggingClass(force, element);
+        handlerPublisher.toggleGrabClass(!force);
+    };
+    return [
+        emitEventToSiblings,
+        emitRemoveEventToSiblings,
+        emitInsertEventToSiblings,
+        emitFinishRemoveEventToSiblings,
+        toggleDraggingClass,
+    ];
+}
+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/utils/index.js

@@ -0,0 +1,9 @@
+export const START_DRAG_EVENT = "startDrag";
+export const DRAG_EVENT = "drag";
+export const START_DROP_EVENT = "startDrop";
+export const DROP_EVENT = "drop";
+export const TEMP_CHILD_CLASS = "temp-child";
+export const draggableTargetTimingFunction = "cubic-bezier(0.2, 0, 0, 1)";
+export const IsDropEvent = (event) => {
+    return event === DROP_EVENT || event === START_DROP_EVENT;
+};

package/dist/core/utils/observer.js

@@ -0,0 +1,11 @@
+export const observeMutation = (callback, element, options, mutationFilter = () => true) => {
+    const observe = new MutationObserver((mutations) => {
+        mutations = mutations.filter(mutationFilter);
+        if (mutations.length > 0) {
+            const mutation = mutations[0];
+            callback(observe, mutation);
+        }
+    });
+    observe.observe(element, options);
+    return observe;
+};

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

@@ -1,5 +1,4 @@
-import { ElementScroll } from 'index';
-import { Direction } from '..';
-
+import { ElementScroll } from "index";
+import { Direction } from "..";
 export declare const scrollByDirection: (element: HTMLElement, direction: Direction, scrollAmount: number) => void;
 export declare const scrollPercent: (direction: Direction, droppable: HTMLElement, droppableScroll: ElementScroll) => number;

package/dist/core/utils/scroll.js

@@ -0,0 +1,17 @@
+import { getPropByDirection } from "./GetStyles";
+export const scrollByDirection = (element, direction, scrollAmount) => {
+    if (scrollAmount == 0) {
+        return;
+    }
+    if (direction === "vertical") {
+        element.scrollBy(0, scrollAmount);
+    }
+    else {
+        element.scrollBy(scrollAmount, 0);
+    }
+};
+export const scrollPercent = (direction, droppable, droppableScroll) => {
+    const { scrollDistance, clientDistance, scrollElement } = getPropByDirection(direction);
+    return (droppableScroll[scrollElement] /
+        (droppable[scrollDistance] - droppable[clientDistance]));
+};

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

@@ -1,5 +1,4 @@
-import { DroppableConfig } from '../configHandler';
-
+import { DroppableConfig } from "../configHandler";
 export declare const isTempElement: (element: Node) => boolean;
 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;

package/dist/core/utils/tempChildren.js

@@ -0,0 +1,146 @@
+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)";
+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);
+    const { distance } = getPropByDirection(direction);
+    distances[distance] -= gap;
+    const [large, largeDistance] = getlarge(direction, draggedElement);
+    distances[largeDistance] = large;
+    return distances;
+};
+const getlarge = (direction, draggedElement) => {
+    const largeDirection = direction == HORIZONTAL ? VERTICAL : HORIZONTAL;
+    const { distance, getRect } = getPropByDirection(largeDirection);
+    return [
+        getRect(draggedElement)[distance],
+        distance,
+    ];
+};
+const setSizes = (element, height, width) => {
+    setSizeStyles(element, height, width);
+    element.style.minWidth = `${width}px`;
+};
+const updateChildAfterCreated = (child, droppable, distances) => {
+    return (observer) => {
+        if (!droppable.contains(child)) {
+            return;
+        }
+        setSizes(child, distances.height, distances.width);
+        observer.disconnect();
+    };
+};
+const fixScrollInitialChange = (droppableConfig, ifStartDragging) => {
+    if (!ifStartDragging) {
+        return;
+    }
+    const { droppable, config, scroll } = droppableConfig;
+    const { direction } = config;
+    const scrollCompleted = scrollPercent(config.direction, droppable, scroll) > 0.99;
+    const { scrollDistance, clientDistance, scrollElement } = getPropByDirection(direction);
+    if (scrollCompleted) {
+        droppable[scrollElement] =
+            droppable[scrollDistance] - droppable[clientDistance];
+    }
+};
+const getTempChild = (draggedElement, ifStartDragging, droppableConfig, addingAnimationDuration) => {
+    if (!droppableConfig) {
+        return;
+    }
+    const { droppable, config } = droppableConfig;
+    const { direction, animationDuration } = config;
+    fixScrollInitialChange(droppableConfig, ifStartDragging);
+    if (droppable.querySelector(`.${TEMP_CHILD_CLASS}`) || !draggedElement) {
+        return;
+    }
+    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");
+    return [child, distances, droppable];
+};
+export const addTempChild = (draggedElement, parent, ifStartDragging, droppableConfig, addingAnimationDuration) => {
+    const result = getTempChild(draggedElement, ifStartDragging, droppableConfig, addingAnimationDuration);
+    if (!result) {
+        return;
+    }
+    const [child, distances, droppable] = result;
+    if (parent.isSameNode(droppable)) {
+        setSizes(child, distances.height, distances.width);
+    }
+    observeMutation(updateChildAfterCreated(child, droppable, distances), droppable, {
+        childList: true,
+        subtree: true,
+    });
+    droppable.appendChild(child);
+};
+export const addTempChildOnInsert = (draggedElement, ifStartDragging, droppableConfig) => {
+    const result = getTempChild(draggedElement, ifStartDragging, droppableConfig);
+    if (!result) {
+        return;
+    }
+    const [child, distances, droppable] = result;
+    droppable.appendChild(child);
+    setSizeAfterAppendChild(child, distances);
+};
+const setSizeAfterAppendChild = (child, size) => {
+    return requestAnimationFrame(() => {
+        setSizes(child, size.height, size.width);
+        requestAnimationFrame(() => {
+            setTranistion(child, 0, timingFunction, "width, min-width, height");
+        });
+    });
+};
+export const removeTempChildrens = (droppable, parent, droppableGroupClass, animationDuration, draggedElementIsOutside = true) => {
+    if (!droppableGroupClass) {
+        return;
+    }
+    var children = document.querySelectorAll(`${getClassesSelector(droppableGroupClass)} > .${TEMP_CHILD_CLASS}`);
+    children.forEach((tempChild) => {
+        const childParent = tempChild.parentElement;
+        if ((childParent?.isSameNode(parent) || !draggedElementIsOutside && childParent?.isSameNode(droppable))) {
+            return;
+        }
+        const tempChildElement = tempChild;
+        setSizes(tempChildElement, 0, 0);
+        setTimeout(() => {
+            tempChild.parentNode?.removeChild(tempChild);
+        }, animationDuration + DELAY_TIME);
+    });
+};
+export const removeTempChild = (parent, animationDuration, isAnimated = false) => {
+    var lastChildren = parent.querySelectorAll(`.${TEMP_CHILD_CLASS}`);
+    lastChildren.forEach((lastChild) => {
+        const tempChildElement = lastChild;
+        if (isAnimated) {
+            setSizes(tempChildElement, 0, 0);
+            setTimeout(() => {
+                if (parent.contains(tempChildElement)) {
+                    parent.removeChild(tempChildElement);
+                }
+            }, animationDuration + DELAY_TIME);
+        }
+        else {
+            parent.removeChild(lastChild);
+        }
+    });
+};

package/dist/core/utils/touchDevice.js

@@ -0,0 +1,3 @@
+export const isTouchEvent = (event) => window.TouchEvent && event instanceof TouchEvent;
+export const IsHTMLElement = (element) => element instanceof HTMLElement;
+export const IsMouseEvent = (event) => event instanceof MouseEvent;

package/dist/core/utils/translate/GetTranslateBeforeDropping.d.ts

@@ -1,6 +1,5 @@
-import { Direction } from '../..';
-import { Translate, WindowScroll } from '../../../../index';
-
+import { Direction } from "../..";
+import { Translate, WindowScroll } from "../../../../index";
 export default function getTranslateBeforeDropping(direction: Direction, siblings: Element[], sourceIndex: number, targetIndex: number, scroll: WindowScroll, previousScroll: {
     scrollLeft: number;
     scrollTop: number;