fluid-dnd 2.4.0 → 2.5.0

package/dist/core/events/remove.js

@@ -1,9 +1,11 @@
 import { getSiblings } from '../utils/GetStyles';
-import { moveTranslate } from '../utils/SetStyles';
+import { moveTranslate, removeTranslateWhitoutTransition, setTranistion } from '../utils/SetStyles';
+import { DraggingState } from '..';
 import getTranslationByDragging from './dragAndDrop/getTranslationByDraggingAndEvent';
-import { IsHTMLElement } from '../utils/typesCheckers';
-import { removeTempChild } from '../tempChildren';
+import { addTempChild, removeTempChild } from '../tempChildren';
 import { useChangeDraggableStyles } from './changeDraggableStyles';
+import { addClass, removeClass } from '../utils/dom/classList';
+import { draggableTargetTimingFunction } from '../utils';
 export default function useRemoveEvents(currentConfig, parent, handlerPublisher, endDraggingAction) {
     const { animationDuration } = currentConfig;
     const [removeElementDraggingStyles] = useChangeDraggableStyles(currentConfig, handlerPublisher, endDraggingAction);
@@ -17,7 +19,7 @@ export default function useRemoveEvents(currentConfig, parent, handlerPublisher,
         const translation = getTranslationByDragging(draggedElement, 'remove', config.direction, droppable);
         for (const [index, sibling] of siblings.entries()) {
             if (index >= targetIndex) {
-                startDragEventOverElement(sibling, translation);
+                moveTranslate(sibling, translation);
                 setTimeout(() => {
                     onFinishRemoveEvent(sibling);
                 }, animationDuration);
@@ -31,21 +33,34 @@ export default function useRemoveEvents(currentConfig, parent, handlerPublisher,
             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 = '';
+    const removeAt = (index, targetIndex, draggableElement, draggingState, config) => {
+        const { removingClass, delayBeforeRemove } = currentConfig;
+        if (targetIndex == index) {
+            addClass(draggableElement, removingClass);
+            setTimeout(() => {
+                removeAfterRemovingClass(index, targetIndex, draggableElement, draggingState, config);
+            }, delayBeforeRemove);
         }
     };
-    return [emitRemoveEventToSiblings, emitFinishRemoveEventToSiblings];
+    const removeAfterRemovingClass = (index, targetIndex, draggableElement, draggingState, config) => {
+        const { removingClass, onRemoveAtEvent } = currentConfig;
+        removeClass(draggableElement, removingClass);
+        addTempChild(draggableElement, parent, draggingState == DraggingState.START_DRAGGING, config);
+        emitRemoveEventToSiblings(targetIndex, draggableElement, config, (sibling) => {
+            removeDraggingStyles(sibling);
+            emitFinishRemoveEventToSiblings(draggableElement);
+        });
+        onRemoveAtEvent(index, true);
+    };
+    const removeDraggingStyles = (element) => {
+        setTranistion(element, animationDuration, draggableTargetTimingFunction);
+        moveTranslate(element);
+    };
+    return [removeAt];
 }

package/dist/core/index.d.ts

@@ -206,3 +206,9 @@ export type CoreConfig<T> = {
      */
     coordinateTransform: CoordinateMap[];
 };
+export declare enum DraggingState {
+    NOT_DRAGGING = 0,
+    START_DRAGGING = 1,
+    DRAGING = 2,
+    END_DRAGGING = 3
+}

package/dist/core/index.js

@@ -1,2 +1,9 @@
 export const HORIZONTAL = 'horizontal';
 export const VERTICAL = 'vertical';
+export var DraggingState;
+(function (DraggingState) {
+    DraggingState[DraggingState["NOT_DRAGGING"] = 0] = "NOT_DRAGGING";
+    DraggingState[DraggingState["START_DRAGGING"] = 1] = "START_DRAGGING";
+    DraggingState[DraggingState["DRAGING"] = 2] = "DRAGING";
+    DraggingState[DraggingState["END_DRAGGING"] = 3] = "END_DRAGGING";
+})(DraggingState || (DraggingState = {}));

package/dist/core/positioning/autoScroll.js

@@ -1,4 +1,4 @@
-import { draggableIsCompleteOutside, getPropByDirection } from '../utils/GetStyles';
+import { draggableIsCompleteOutside, getAxisValue, getBefore, getDistanceValue, getRect } from '../utils/GetStyles';
 const scrollByDirection = (element, direction, scrollAmount) => {
     if (scrollAmount == 0) {
         return;
@@ -14,11 +14,12 @@ 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 [distanceValue] = getDistanceValue(direction, getRect(draggedElement));
         const parentBoundingClientRect = getRect(parent);
-        const positionInsideParent = position[before] - parentBoundingClientRect[before] + translate[axis];
-        const parentDistance = parentBoundingClientRect[distance];
+        const positionInsideParent = getBefore(direction, position) -
+            getBefore(direction, parentBoundingClientRect) +
+            getAxisValue(direction, translate);
+        const [parentDistance] = getDistanceValue(direction, parentBoundingClientRect);
         const totalDistance = parentDistance - distanceValue;
         const relativePosition = positionInsideParent / totalDistance;
         const relativeDistanceValue = distanceValue / totalDistance;

package/dist/core/positioning/usePositioning.js

@@ -1,4 +1,4 @@
-import { getNearestFixedParentPosition, getPropByDirection, getValueFromProperty } from '../utils/GetStyles';
+import { getAxisValue, getBefore, getBeforeMarginValue, getBorderBeforeWidthValue, getDistanceValue, getInnerDistance, getNearestFixedParentPosition, getOffsetValue, getPageValue, getPropByDirection, getRect, getScrollValue, isSameNode } from '../utils/GetStyles';
 import { HORIZONTAL, VERTICAL } from '..';
 import { useScroll } from './autoScroll';
 import { HANDLER_CLASS, DRAGGING_CLASS } from '../utils/classes';
@@ -17,19 +17,18 @@ export const usePositioning = (draggedElement, coordinateTransforms) => {
     };
     const setTransform = (element, parent, pagePosition, direction) => {
         const getTranslateWihtDirection = (translateDirection) => {
-            const { beforeMargin, borderBeforeWidth, before, offset, scroll, page, inner, distance, axis, getRect } = getPropByDirection(translateDirection);
-            const pageValue = pagePosition[page];
-            const scrollValue = window[scroll];
-            const innerDistance = window[inner];
-            const distanceValue = getRect(element)[distance];
-            const border = getValueFromProperty(element, borderBeforeWidth);
-            const margin = getValueFromProperty(element, beforeMargin);
-            const elementPosittion = pageValue - currentOffset[offset];
+            const pageValue = getPageValue(translateDirection, pagePosition);
+            const scrollValue = getScrollValue(translateDirection, window);
+            const innerDistance = getInnerDistance(translateDirection, window);
+            const [distanceValue] = getDistanceValue(translateDirection, getRect(element));
+            const border = getBorderBeforeWidthValue(translateDirection, element);
+            const margin = getBeforeMarginValue(translateDirection, element);
+            const elementPosittion = pageValue - getOffsetValue(translateDirection, currentOffset);
             const beforefixecParentValue = getNearestFixedParentPosition(element, translateDirection);
             if (elementPosittion >= scrollValue - distanceValue / 2 &&
                 elementPosittion <= scrollValue + innerDistance) {
                 const newTranslate = elementPosittion -
-                    position[before] -
+                    getBefore(translateDirection, position) -
                     border -
                     margin -
                     scrollValue -
@@ -37,7 +36,7 @@ export const usePositioning = (draggedElement, coordinateTransforms) => {
                 updateScroll(translateDirection);
                 return newTranslate;
             }
-            const defaultTransalation = translate[axis];
+            const defaultTransalation = getAxisValue(translateDirection, translate);
             return defaultTransalation;
         };
         const updateScroll = (translateDirection) => {
@@ -72,16 +71,15 @@ export const usePositioning = (draggedElement, coordinateTransforms) => {
     return [setTransform, updateTransformState];
 };
 const getOffsetWithDraggable = (direction, element, draggable) => {
-    const { borderBeforeWidth, before, getRect } = getPropByDirection(direction);
-    return (getRect(element)[before] -
-        getRect(draggable)[before] -
-        getValueFromProperty(draggable, borderBeforeWidth));
+    return (getBefore(direction, getRect(element)) -
+        getBefore(direction, getRect(draggable)) -
+        getBorderBeforeWidthValue(direction, draggable));
 };
 const getOffset = (event, draggable) => {
     let { offsetX, offsetY, target } = event;
     let targetHandler = getHandlerElementAncestor(target, draggable);
     const targetElement = target;
-    if (targetElement && targetHandler && !targetElement.isSameNode(targetHandler)) {
+    if (targetElement && targetHandler && !isSameNode(targetElement, targetHandler)) {
         offsetX += getOffsetWithDraggable(HORIZONTAL, targetElement, targetHandler);
         offsetY += getOffsetWithDraggable(VERTICAL, targetElement, targetHandler);
     }
@@ -93,19 +91,18 @@ const getOffset = (event, draggable) => {
 };
 const getHandlerElementAncestor = (target, draggable) => {
     const targetHandler = target?.closest(`.${HANDLER_CLASS}`);
-    if (targetHandler && targetHandler.isSameNode(draggable)) {
+    if (targetHandler && isSameNode(draggable, targetHandler)) {
         return target;
     }
     return targetHandler;
 };
 const getPositionByDistance = (direction, event, element, offsetEvent) => {
-    const { offset, beforeMargin, page, borderBeforeWidth, scroll } = getPropByDirection(direction);
     const beforefixecParentValue = getNearestFixedParentPosition(element, direction);
-    return (event[page] -
-        offsetEvent[offset] -
-        getValueFromProperty(element, beforeMargin) -
-        getValueFromProperty(element, borderBeforeWidth) -
-        window[scroll] -
+    return (getPageValue(direction, event) -
+        getOffsetValue(direction, offsetEvent) -
+        getBeforeMarginValue(direction, element) -
+        getBorderBeforeWidthValue(direction, element) -
+        getScrollValue(direction, window) -
         beforefixecParentValue);
 };
 export const getTransformState = (event, element, draggable) => {

package/dist/core/tempChildren.js

@@ -1,18 +1,19 @@
 import { HORIZONTAL, VERTICAL } from '.';
-import { getPropByDirection } from './utils/GetStyles';
+import { getDistanceValue, getPropByDirection, getRect, getScrollElementValue, isSameNode } 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 { NONE_TRANSLATE, 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;
+const TRANSITION_PROPERTY = 'width, min-width, height';
 const getDistance = (droppable, draggedElement, direction) => {
     let distances = getTranslationByDragging(draggedElement, START_DRAG_EVENT, direction, droppable);
     const gap = getGapPixels(droppable, direction);
-    const { distance } = getPropByDirection(direction);
+    const [, distance] = getDistanceValue(direction, distances);
     distances[distance] -= gap;
     const [large, largeDistance] = getlarge(direction, draggedElement);
     distances[largeDistance] = large;
@@ -20,54 +21,57 @@ 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];
+    const distanceValue = getDistanceValue(largeDirection, getRect(draggedElement));
+    return distanceValue;
 };
-const setSizes = (element, height, width) => {
-    setSizeStyles(element, height, width);
-    element.style.minWidth = `${width}px`;
+const setSizes = (element, translate = NONE_TRANSLATE) => {
+    setSizeStyles(element, translate);
+    element.style.minWidth = `${translate.width}px`;
 };
 const updateChildAfterCreated = (child, droppable, distances) => {
     return (observer) => {
         if (!droppable.contains(child)) {
             return;
         }
-        setSizes(child, distances.height, distances.width);
+        setSizes(child, distances);
         observer.disconnect();
     };
 };
+const overflowScroll = (droppable, direction) => {
+    const { scrollDistance, clientDistance } = getPropByDirection(direction);
+    return droppable[scrollDistance] - droppable[clientDistance];
+};
 const scrollPercent = (direction, droppable, droppableScroll) => {
-    const { scrollDistance, clientDistance, scrollElement } = getPropByDirection(direction);
-    return droppableScroll[scrollElement] / (droppable[scrollDistance] - droppable[clientDistance]);
+    const [scrollElementValue] = getScrollElementValue(direction, droppableScroll);
+    return scrollElementValue / overflowScroll(droppable, direction);
 };
-const fixScrollInitialChange = (droppableConfig, ifStartDragging) => {
+const fixScrollInitialChange = (droppable, config, scroll, 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);
+    const scrollCompleted = scrollPercent(direction, droppable, scroll) > 0.99;
+    const [, scrollElement] = getScrollElementValue(direction, droppable);
     if (scrollCompleted) {
-        droppable[scrollElement] = droppable[scrollDistance] - droppable[clientDistance];
+        droppable[scrollElement] = overflowScroll(droppable, direction);
     }
 };
 const getTempChild = (draggedElement, ifStartDragging, droppableConfig, addingAnimationDuration) => {
     if (!droppableConfig) {
         return;
     }
-    const { droppable, config } = droppableConfig;
+    const { droppable, config, scroll } = droppableConfig;
     const { direction, animationDuration } = config;
-    fixScrollInitialChange(droppableConfig, ifStartDragging);
+    fixScrollInitialChange(droppable, config, scroll, 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);
+    setSizes(child);
     const distances = getDistance(droppable, draggedElement, direction);
-    setTranistion(child, addingAnimationDuration ?? animationDuration, timingFunction, 'width, min-width, height');
+    setTranistion(child, addingAnimationDuration ?? animationDuration, timingFunction, TRANSITION_PROPERTY);
     return [child, distances, droppable];
 };
 export const addTempChild = (draggedElement, parent, ifStartDragging, droppableConfig, addingAnimationDuration) => {
@@ -76,8 +80,8 @@ export const addTempChild = (draggedElement, parent, ifStartDragging, droppableC
         return;
     }
     const [child, distances, droppable] = result;
-    if (parent.isSameNode(droppable)) {
-        setSizes(child, distances.height, distances.width);
+    if (isSameNode(parent, droppable)) {
+        setSizes(child, distances);
     }
     observeMutation(updateChildAfterCreated(child, droppable, distances), droppable, {
         childList: true,
@@ -96,9 +100,9 @@ export const addTempChildOnInsert = (draggedElement, ifStartDragging, droppableC
 };
 const setSizeAfterAppendChild = (child, size) => {
     return requestAnimationFrame(() => {
-        setSizes(child, size.height, size.width);
+        setSizes(child, size);
         requestAnimationFrame(() => {
-            setTranistion(child, 0, timingFunction, 'width, min-width, height');
+            setTranistion(child, 0, timingFunction, TRANSITION_PROPERTY);
         });
     });
 };
@@ -109,12 +113,12 @@ 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 (isSameNode(parent, childParent) ||
+            (!draggedElementIsOutside && isSameNode(droppable, childParent))) {
             return;
         }
         const tempChildElement = tempChild;
-        setSizes(tempChildElement, 0, 0);
+        setSizes(tempChildElement);
         setTimeout(() => {
             tempChild.parentNode?.removeChild(tempChild);
         }, animationDuration + DELAY_TIME);
@@ -125,7 +129,7 @@ export const removeTempChild = (parent, animationDuration, isAnimated = false) =
     lastChildren.forEach((lastChild) => {
         const tempChildElement = lastChild;
         if (isAnimated) {
-            setSizes(tempChildElement, 0, 0);
+            setSizes(tempChildElement);
             setTimeout(() => {
                 if (parent.contains(tempChildElement)) {
                     parent.removeChild(tempChildElement);

package/dist/core/useDraggable.js

@@ -1,24 +1,18 @@
 import { assignDraggingEvent, convetEventToDragMouseTouchEvent, moveTranslate, setCustomFixedSize, setEventWithInterval, setTranistion } from './utils/SetStyles';
 import { usePositioning } from './positioning/usePositioning';
-import useRemoveEvents from './events/remove';
+import { DraggingState } from '.';
 import { DRAG_EVENT, draggableTargetTimingFunction, START_DRAG_EVENT, START_DROP_EVENT } from './utils';
 import ConfigHandler from './config/configHandler';
 import { IsHTMLElement, isTouchEvent } from './utils/typesCheckers';
-import { addTempChild, addTempChildOnInsert, removeTempChildrens } from './tempChildren';
+import { addTempChild, removeTempChildrens } from './tempChildren';
 import { DroppableConfigurator } from './config/droppableConfigurator';
-import { addClass, containClass, getClassesList, getClassesSelector, removeClass, toggleClass } from './utils/dom/classList';
+import { addClass, containClass, getClassesList, getClassesSelector, 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";
-    DraggingState[DraggingState["START_DRAGGING"] = 1] = "START_DRAGGING";
-    DraggingState[DraggingState["DRAGING"] = 2] = "DRAGING";
-    DraggingState[DraggingState["END_DRAGGING"] = 3] = "END_DRAGGING";
-})(DraggingState || (DraggingState = {}));
+import { getRect, isSameNode } from './utils/GetStyles';
+const ON_MOUSEDOWN = 'onmousedown';
 export default function useDraggable(draggableElement, index, config, parent, handlerPublisher) {
-    const { handlerSelector, isDraggable, droppableGroup, animationDuration, delayBeforeRemove, draggingClass, removingClass, onRemoveAtEvent, droppableClass, onDragStart, delayBeforeTouchMoveEvent, coordinateTransform } = config;
+    const { handlerSelector, isDraggable, droppableGroup, animationDuration, draggingClass, droppableClass, onDragStart, delayBeforeTouchMoveEvent, coordinateTransform } = config;
     const droppableGroupClass = getClassesList(droppableGroup)
         .map((classGroup) => `droppable-group-${classGroup}`)
         .join(' ');
@@ -34,9 +28,7 @@ export default function useDraggable(draggableElement, index, config, parent, ha
     const endDraggingState = () => {
         draggingState = DraggingState.NOT_DRAGGING;
     };
-    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);
     };
@@ -65,7 +57,7 @@ export default function useDraggable(draggableElement, index, config, parent, ha
         if (handler &&
             handlerParent &&
             containClass(handlerParent, DROPPABLE_CLASS) &&
-            !handlerParent.isSameNode(parent)) {
+            !isSameNode(parent, handlerParent)) {
             return null;
         }
         return handler;
@@ -73,22 +65,22 @@ export default function useDraggable(draggableElement, index, config, parent, ha
     const setSlotRefElementParams = (element) => {
         const handlerElement = (getHandler(element) ?? element);
         if (handlerElement && isDraggable(element)) {
-            assignDraggingEvent(handlerElement, 'onmousedown', onmousedown('mousemove', 'mouseup'));
+            assignDraggingEvent(handlerElement, ON_MOUSEDOWN, onmousedown('mousemove', 'mouseup'));
             assignDraggingEvent(handlerElement, 'ontouchstart', onmousedown('touchmove', 'touchend'), (event) => {
+                const touch = event.touches[0];
                 initialTouch = {
-                    x: event.touches[0].clientX,
-                    y: event.touches[0].clientY
+                    x: touch.clientX,
+                    y: touch.clientY
                 };
             });
             disableMousedownEventFromImages(handlerElement);
         }
-        if (!element?.isSameNode(handlerElement)) {
-            assignDraggingEvent(element, 'onmousedown', mousedownOnDraggablefunction);
+        if (!isSameNode(element, handlerElement)) {
+            assignDraggingEvent(element, ON_MOUSEDOWN, mousedownOnDraggablefunction);
         }
         addClass(parent, DROPPABLE_CLASS);
     };
     const disableMousedownEventFromImages = (handlerElement) => {
-        // Avoid dragging inner images
         const images = handlerElement.querySelectorAll('img');
         Array.from(images).forEach((image) => {
             image.onmousedown = () => false;
@@ -105,11 +97,18 @@ export default function useDraggable(draggableElement, index, config, parent, ha
         setTransform(draggableElement, droppable, pagePosition, config.direction);
         emitDraggingEvent(draggableElement, DRAG_EVENT, droppableConfigurator.current);
     };
+    const removeTranslates = (droppable) => {
+        const drgagables = droppable.querySelectorAll(`.${DRAGGABLE_CLASS}`);
+        for (const draggable of drgagables) {
+            moveTranslate(draggable);
+        }
+    };
     const changeDroppable = (newdDroppableConfig, oldDroppableConfig) => {
         if (oldDroppableConfig &&
             draggingState == DraggingState.DRAGING &&
-            !newdDroppableConfig?.droppable.isSameNode(oldDroppableConfig.droppable)) {
+            !isSameNode(newdDroppableConfig?.droppable, oldDroppableConfig.droppable)) {
             emitDraggingEvent(draggableElement, DRAG_EVENT, oldDroppableConfig);
+            removeTranslates(oldDroppableConfig.droppable);
         }
     };
     const droppableConfigurator = new DroppableConfigurator(draggableElement, droppableGroupClass, parent, setTransformDragEvent, changeDroppable, config.mapFrom);
@@ -121,7 +120,7 @@ export default function useDraggable(draggableElement, index, config, parent, ha
             ? Array.from(document.querySelectorAll(getClassesSelector(droppableGroupClass)))
             : [parent];
         for (const droppable of droppables) {
-            droppable.classList.toggle(droppableClass, !isOutside && droppable.isSameNode(droppableConfigurator.current.droppable));
+            droppable.classList.toggle(droppableClass, !isOutside && isSameNode(droppable, droppableConfigurator.current.droppable));
         }
     };
     const onMove = (event, isTouchEvent = false) => {
@@ -149,8 +148,9 @@ export default function useDraggable(draggableElement, index, config, parent, ha
     };
     const cursorWasNotMoved = (event) => {
         if (isTouchEvent(event) && initialTouch && draggingState == DraggingState.START_DRAGGING) {
-            const movedX = Math.abs(event.touches[0].clientX - initialTouch.x);
-            const movedY = Math.abs(event.touches[0].clientY - initialTouch.y);
+            const touch = event.touches[0];
+            const movedX = Math.abs(touch.clientX - initialTouch.x);
+            const movedY = Math.abs(touch.clientY - initialTouch.y);
             if (Math.abs(movedX) > 5 && Math.abs(movedY) > 5) {
                 clearTimeout(delayTimeout);
                 return false;
@@ -184,7 +184,7 @@ export default function useDraggable(draggableElement, index, config, parent, ha
         const { clientX, clientY } = event;
         const elementBelow = document.elementFromPoint(clientX, clientY);
         const draggableAncestor = elementBelow?.closest(`.${DRAGGABLE_CLASS}`);
-        return draggableAncestor && element.isSameNode(draggableAncestor);
+        return draggableAncestor && isSameNode(element, draggableAncestor);
     };
     const getDragStartEventData = (element) => {
         const value = config.onGetValue(index);
@@ -233,7 +233,7 @@ export default function useDraggable(draggableElement, index, config, parent, ha
     const disableDragging = (moveEvent, event) => {
         toggleDroppableClass(true);
         const convertedEvent = convetEventToDragMouseTouchEvent(event);
-        onDropDraggingEvent(droppableConfigurator.isOutside(convertedEvent, false));
+        onDropDraggingEvent(droppableConfigurator.isOutside(convertedEvent));
         clearTimeout(delayTimeout);
         document.removeEventListener(moveEvent, handleMove);
         droppableConfigurator.updateConfig(convertedEvent);
@@ -291,10 +291,10 @@ export default function useDraggable(draggableElement, index, config, parent, ha
     };
     const removeDraggingStyles = (element) => {
         setTranistion(element, animationDuration, draggableTargetTimingFunction);
-        moveTranslate(element, 0, 0);
+        moveTranslate(element);
     };
     const setDraggingStyles = (element) => {
-        const { height, width } = element.getBoundingClientRect();
+        const { height, width } = getRect(element);
         setCustomFixedSize(element, {
             fixedHeight: `${height}px`,
             fixedWidth: `${width}px`
@@ -303,32 +303,21 @@ export default function useDraggable(draggableElement, index, config, parent, ha
         toggleClass(element, draggingClass, true);
         element.style.transition = '';
     };
-    const removeAfterRemovingClass = (targetIndex, config) => {
-        removeClass(draggableElement, removingClass);
-        addTempChild(draggableElement, parent, draggingState == DraggingState.START_DRAGGING, droppableConfigurator.initial);
-        emitRemoveEventToSiblings(targetIndex, draggableElement, config, (sibling) => {
-            removeDraggingStyles(sibling);
-            emitFinishRemoveEventToSiblings(draggableElement);
-        });
-        onRemoveAtEvent(index, true);
-    };
     const removeAtFromElement = (targetIndex) => {
-        if (!droppableConfigurator.initial) {
-            return;
-        }
-        const config = droppableConfigurator.initial;
-        if (targetIndex == index) {
-            addClass(draggableElement, removingClass);
-            setTimeout(() => {
-                removeAfterRemovingClass(targetIndex, config);
-            }, delayBeforeRemove);
-        }
+        import('./events/remove').then((module) => {
+            const [removeAt] = module.default(config, parent, handlerPublisher, endDraggingState);
+            if (!droppableConfigurator.initial) {
+                return;
+            }
+            removeAt(index, targetIndex, draggableElement, draggingState, droppableConfigurator.initial);
+        });
     };
     const insertAtFromElement = (targetIndex, value) => {
         if (targetIndex === index ||
             (targetIndex === config.onGetLegth() && index === targetIndex - 1)) {
-            emitInsertEventToSiblings(targetIndex, draggableElement, parent, value, () => {
-                addTempChildOnInsert(draggableElement, draggingState == DraggingState.START_DRAGGING, droppableConfigurator.initial);
+            import('./events/insert').then((module) => {
+                const [emitInsertEventToSiblings] = module.default(config, parent, handlerPublisher, endDraggingState);
+                emitInsertEventToSiblings(targetIndex, draggableElement, parent, value, droppableConfigurator.initial);
             });
         }
     };

package/dist/core/useDroppable.d.ts

@@ -1,3 +1,3 @@
-import { CoreConfig } from ".";
-import HandlerPublisher from "./HandlerPublisher";
+import { CoreConfig } from '.';
+import HandlerPublisher from './HandlerPublisher';
 export default function useDroppable<T>(coreConfig: CoreConfig<T>, handlerPublisher: HandlerPublisher, droppable?: HTMLElement, indexAttr?: string): readonly [((targetIndex: number) => void)[], ((targetIndex: number, value: T) => void)[]];

package/dist/core/useDroppable.js

@@ -1,8 +1,8 @@
-import { parseIntEmpty } from "./utils/GetStyles";
-import { addMultipleClasses, getClassesList } from "./utils/dom/classList";
-import useDraggable from "./useDraggable";
-import { AddCssStylesToElement } from "./utils/SetStyles";
-import { DRAGGABLE_CLASS, DRAGGING_CLASS, DRAGGING_HANDLER_CLASS, DROPPING_CLASS, GRAB_CLASS, GRABBING_CLASS, HANDLER_CLASS } from "./utils/classes";
+import { parseIntEmpty } from './utils/GetStyles';
+import { addMultipleClasses, getClassesList } from './utils/dom/classList';
+import useDraggable from './useDraggable';
+import { AddCssStylesToElement } from './utils/SetStyles';
+import { DRAGGABLE_CLASS, DRAGGING_CLASS, DRAGGING_HANDLER_CLASS, DROPPING_CLASS, GRAB_CLASS, GRABBING_CLASS, HANDLER_CLASS } from './utils/classes';
 const setDroppableGroupClass = (droppableGroupClass, droppable) => {
     if (droppableGroupClass) {
         addMultipleClasses(droppable, droppableGroupClass);
@@ -13,13 +13,13 @@ const createDraggableCssStyles = () => {
         `.${DRAGGABLE_CLASS}{touch-action:manipulation;user-select:none;box-sizing:border-box!important;-webkit-user-select:none;}`,
         `.${HANDLER_CLASS}{pointer-events:auto!important;}`,
         `.${GRAB_CLASS}{cursor:grab;}`,
-        ".temp-child{touch-action:none;pointer-events:none;box-sizing:border-box!important;}",
+        '.temp-child{touch-action:none;pointer-events:none;box-sizing:border-box!important;}',
         `.droppable{box-sizing:border-box!important;}`,
         `.${DRAGGING_CLASS}{position:fixed;z-index:5000;width:var(--fixedWidth)!important;height:var(--fixedHeight)!important;}`,
         `.${DRAGGING_HANDLER_CLASS}{pointer-events:none!important;}`,
         `.${DROPPING_CLASS}{pointer-events:none!important;}`,
         `.${GRABBING_CLASS}{cursor:grabbing;}`,
-        `.disable-transition{transition:none!important;}`,
+        `.disable-transition{transition:none!important;}`
     ]);
 };
 export default function useDroppable(coreConfig, handlerPublisher, droppable, indexAttr = 'index') {
@@ -28,14 +28,11 @@ export default function useDroppable(coreConfig, handlerPublisher, droppable, in
     let insertAtFromElementList = [];
     const { droppableGroup } = coreConfig;
     if (!droppable) {
-        return [
-            removeAtFromElementList,
-            insertAtFromElementList
-        ];
+        return [removeAtFromElementList, insertAtFromElementList];
     }
     const droppableGroupClass = getClassesList(droppableGroup)
         .map((classGroup) => `droppable-group-${classGroup}`)
-        .join(" ");
+        .join(' ');
     createDraggableCssStyles();
     setDroppableGroupClass(droppableGroupClass, droppable);
     for (const child of droppable.children) {
@@ -48,8 +45,5 @@ export default function useDroppable(coreConfig, handlerPublisher, droppable, in
             insertAtFromElementList.push(insertAtFromElement);
         }
     }
-    return [
-        removeAtFromElementList,
-        insertAtFromElementList
-    ];
+    return [removeAtFromElementList, insertAtFromElementList];
 }