fluid-dnd 2.4.0 → 2.5.0

package/README.md

@@ -1,7 +1,6 @@
  <h1 align="center">
-    <img src="public/fluid-dnd.svg"
-    alt="Icon" width="150" height="140" />
-  <br>Fluid DnD<br>
+    <img src="public/fluid-dnd-logo.png"
+    alt="Icon" width="200" height="200" />
 </h1>
 
 <div align="center">
@@ -11,15 +10,20 @@
 [![version](https://img.shields.io/npm/v/fluid-dnd)](https://www.npmjs.com/package/fluid-dnd)
 ![GitHub issues](https://img.shields.io/github/issues/carlosjorger/fluid-dnd)
 ![GitHub stars](https://img.shields.io/github/stars/carlosjorger/fluid-dnd)
-[![test_coverage](https://api.codeclimate.com/v1/badges/6b27047dcf150ccddfac/test_coverage)](https://codeclimate.com/github/carlosjorger/fluid-dnd/test_coverage)
 
-</div>
+_Drag and drop elements of your list smoothly and effortlessly_
 
-Fluid DnD is a [**fluid**, **agnostic** and **versatile** drag and drop
-library for lists; with support for **Vue**, **React** and **Svelte**](https://fluid-dnd.netlify.app/). It's a **lightweight** tool ~8 Kb (gzip) with no depenencies.
+[📖 **Documentation**](https://fluid-dnd.netlify.app/) | [🤹 **Examples**](https://fluid-dnd.netlify.app/vue/example/vertical-list/single-vertical-list/)
 
 <img src="https://github.com/user-attachments/assets/1b7ac5e3-48e9-43f9-a577-e78c6b9eacae" width="100%"/>
 
+</div>
+
+## 🪪 About
+
+Fluid DnD is a **fluid**, **agnostic** and **versatile** drag and drop
+library for lists; with support for **Vue**, **React** and **Svelte**. It's a **lightweight** tool ~8 Kb (gzip) with no depenencies.
+
 ## 🧰 Features
 
 - ✅ **Fully customizable 🎨**.
@@ -50,21 +54,16 @@ library for lists; with support for **Vue**, **React** and **Svelte**](https://f
    pnpm i fluid-dnd
    ```
 
-3. **Documentation**
-
-- 📚 Check out all the [docs](https://fluid-dnd.netlify.app/).
-- 🛠️ Edit this example [here](https://codesandbox.io/s/nifty-hooks-5plkpl).
-- 📘 See other examples [here](https://fluid-dnd.netlify.app/vue/example/vertical-list/single-vertical-list/).
-
 ## 📚 Libraries Support
+
 - **Vue** >=3.0.0
 - **React** >= 18.0.0
 - **Svelte** >= 5.0.0
 
 ## 🤝 Contributing
 
-If you're interested in contributing to [fluid-dnd](https://github.com/carlosjorger/fluid-dnd), please read our [CONTRIBUTING  GUIDELINES](./CONTRIBUTING.md) before submitting a pull request.
+If you're interested in contributing to [fluid-dnd](https://github.com/carlosjorger/fluid-dnd), please read our [CONTRIBUTING GUIDELINES](./CONTRIBUTING.md) before submitting a pull request.
 
 ## 🔑 License
 
-- [MIT](https://github.com/carlosjorger/fluid-dnd/blob/main/LICENSE).   
+- [MIT](https://github.com/carlosjorger/fluid-dnd/blob/main/LICENSE).

package/dist/{HandlerPublisher-B68XPAcH.cjs → HandlerPublisher-1MmlNkG3.cjs}

@@ -1 +1 @@
-"use strict";var d=Object.defineProperty;var n=(e,s,l)=>s in e?d(e,s,{enumerable:!0,configurable:!0,writable:!0,value:l}):e[s]=l;var a=(e,s,l)=>n(e,typeof s!="symbol"?s+"":s,l);const r=require("./index-2hBSSK9_.cjs");class h{constructor(){a(this,"handlers");this.handlers=[]}addSubscriber(s){this.handlers.includes(s)||(this.handlers.push(s),r.addClass(s,r.GRAB_CLASS))}toggleGrabClass(s){for(const l of this.handlers)r.toggleClass(l,r.GRAB_CLASS,s)}}exports.HandlerPublisher=h;
+"use strict";var d=Object.defineProperty;var n=(e,s,l)=>s in e?d(e,s,{enumerable:!0,configurable:!0,writable:!0,value:l}):e[s]=l;var a=(e,s,l)=>n(e,typeof s!="symbol"?s+"":s,l);const r=require("./index-BdOAK6C7.cjs");class h{constructor(){a(this,"handlers");this.handlers=[]}addSubscriber(s){this.handlers.includes(s)||(this.handlers.push(s),r.addClass(s,r.GRAB_CLASS))}toggleGrabClass(s){for(const l of this.handlers)r.toggleClass(l,r.GRAB_CLASS,s)}}exports.HandlerPublisher=h;

package/dist/{HandlerPublisher-pcX0Zmas.js → HandlerPublisher-DBjPMiyO.js}

@@ -1,7 +1,7 @@
 var d = Object.defineProperty;
 var e = (a, s, l) => s in a ? d(a, s, { enumerable: !0, configurable: !0, writable: !0, value: l }) : a[s] = l;
 var r = (a, s, l) => e(a, typeof s != "symbol" ? s + "" : s, l);
-import { a as h, t as n, G as t } from "./index-DFXw7kYo.js";
+import { a as h, t as n, G as t } from "./index-HczUoMBK.js";
 class c {
   constructor() {
     r(this, "handlers");

package/dist/core/config/configHandler.js

@@ -1,9 +1,9 @@
-import { getScrollElement } from '../utils/GetStyles';
+import { getScrollElement, isSameNode } from '../utils/GetStyles';
 import { containstClasses } from '../utils/dom/classList';
 export default class ConfigHandler {
     static configs = [];
     static addConfig(droppable, config) {
-        const configs = ConfigHandler.configs.filter((configHandler) => !configHandler.droppable.isSameNode(droppable));
+        const configs = ConfigHandler.configs.filter((configHandler) => !isSameNode(configHandler.droppable, droppable));
         const scroll = getScrollElement(droppable);
         configs.push({
             droppable,
@@ -20,13 +20,13 @@ export default class ConfigHandler {
         for (const configHandler of ConfigHandler.configs) {
             const { droppable } = configHandler;
             if ((droppableGroupClass && containstClasses(droppable, droppableGroupClass)) ||
-                droppable.isSameNode(currentDroppable)) {
+                isSameNode(currentDroppable, droppable)) {
                 configHandler.scroll = getScrollElement(droppable);
             }
         }
     }
     static getConfig(curerntDroppable) {
-        const config = ConfigHandler.configs.find(({ droppable }) => droppable.isSameNode(curerntDroppable));
+        const config = ConfigHandler.configs.find(({ droppable }) => isSameNode(curerntDroppable, droppable));
         return config;
     }
 }

package/dist/core/config/droppableConfigurator.d.ts

@@ -19,7 +19,8 @@ export declare class DroppableConfigurator<T> {
     private onScrollEvent;
     private setOnScroll;
     getConfigFrom(element: Element): DroppableConfig<any> | undefined;
+    droppableIfInsideCurrent(droppable: Element | null | undefined, current: HTMLElement): boolean | null | undefined;
     getCurrentConfig(event: DragMouseTouchEvent): DroppableConfig<any> | DroppableConfig<T> | undefined;
     updateConfig(event: DragMouseTouchEvent): void;
-    isOutside(event: DragMouseTouchEvent, hiddenDraggable?: boolean): boolean;
+    isOutside(event: DragMouseTouchEvent): boolean;
 }

package/dist/core/config/droppableConfigurator.js

@@ -1,5 +1,5 @@
 import ConfigHandler from './configHandler';
-import { draggableIsOutside } from '../utils/GetStyles';
+import { draggableIsOutside, isSameNode } from '../utils/GetStyles';
 import { IsHTMLElement } from '../utils/typesCheckers';
 import { setEventWithInterval } from '../utils/SetStyles';
 import { getClassesSelector } from '../utils/dom/classList';
@@ -34,32 +34,23 @@ export class DroppableConfigurator {
         this.groupClass = droppableGroupClass;
         this.dragEvent = setTransformDragEvent;
         this.mapFrom = mapFrom;
-        this.initial = parent ? ConfigHandler.getConfig(parent) : undefined;
+        this.initial = ConfigHandler.getConfig(parent);
         this.changeDroppable = changeDroppable;
     }
     getDraggableAncestor(clientX, clientY, draggable) {
         return document
             .elementsFromPoint(clientX, clientY)
-            .filter((element) => !element.isSameNode(draggable));
+            .filter((element) => !isSameNode(draggable, element));
     }
-    getElementBelow(currentElement, event, hiddenDraggable = true) {
+    getElementBelow(currentElement, event) {
         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;
+        return getElementBelow(this);
     }
-    getCurrent(currentElement, event, hiddenDraggable = true) {
-        const elementBelow = this.getElementBelow(currentElement, event, hiddenDraggable);
+    getCurrent(currentElement, event) {
+        const elementBelow = this.getElementBelow(currentElement, event);
         if (!this.groupClass || !elementBelow) {
             return;
         }
@@ -89,7 +80,7 @@ export class DroppableConfigurator {
         if (!coreConfig) {
             return undefined;
         }
-        if (element.isSameNode(this.parent)) {
+        if (isSameNode(this.parent, element)) {
             return coreConfig;
         }
         return {
@@ -97,12 +88,17 @@ export class DroppableConfigurator {
             config: MapConfig(coreConfig, this.mapFrom)
         };
     }
+    droppableIfInsideCurrent(droppable, current) {
+        return droppable && !isSameNode(current, droppable) && current.contains(droppable);
+    }
     getCurrentConfig(event) {
         const currentElement = this.draggableElement;
-        if (this.current && this.isNotInsideAnotherDroppable(currentElement, this.current?.droppable)) {
+        const currentDroppable = this.getCurrent(currentElement, event);
+        if (this.current &&
+            this.isNotInsideAnotherDroppable(currentElement, this.current?.droppable) &&
+            !this.droppableIfInsideCurrent(currentDroppable, this.current?.droppable)) {
             return this.current;
         }
-        const currentDroppable = this.getCurrent(currentElement, event);
         if (!currentDroppable) {
             return this.getConfigFrom(this.parent);
         }
@@ -116,8 +112,8 @@ export class DroppableConfigurator {
         this.current = this.getCurrentConfig(event);
         this.changeDroppable(this.current, oldDroppableConfig);
     }
-    isOutside(event, hiddenDraggable = true) {
+    isOutside(event) {
         const currentElement = this.draggableElement;
-        return !Boolean(this.getCurrent(currentElement, event, hiddenDraggable));
+        return !Boolean(this.getCurrent(currentElement, event));
     }
 }

package/dist/core/events/changeDraggableStyles.js

@@ -1,14 +1,13 @@
 import { DRAGGING_CLASS, DRAGGING_HANDLER_CLASS, GRABBING_CLASS } from '../utils/classes';
 import { toggleClass } from '../utils/dom/classList';
-import { moveTranslate, setCustomFixedSize, setTranistion } from '../utils/SetStyles';
+import { moveTranslate, removeTranslateWhitoutTransition, setCustomFixedSize, setTranistion } from '../utils/SetStyles';
 import { draggableTargetTimingFunction } from '../utils';
 export const useChangeDraggableStyles = (currentConfig, handlerPublisher, endDraggingAction) => {
     const { handlerSelector, animationDuration } = currentConfig;
     const removeElementDraggingStyles = (element) => {
         endDraggingAction();
         toggleDraggingClass(element, false);
-        element.style.transform = '';
-        element.style.transition = '';
+        removeTranslateWhitoutTransition(element);
         element.style.top = '';
         element.style.left = '';
         setCustomFixedSize(element, {
@@ -32,9 +31,8 @@ export const useChangeDraggableStyles = (currentConfig, handlerPublisher, endDra
         }
     };
     const dragEventOverElement = (element, translation) => {
-        const { width, height } = translation;
-        moveTranslate(element, height, width);
         setTranistion(element, animationDuration, draggableTargetTimingFunction);
+        moveTranslate(element, translation);
     };
     return [removeElementDraggingStyles, toggleDraggingClass, dragEventOverElement];
 };

package/dist/core/events/dragAndDrop/dragAndDrop.js

@@ -1,8 +1,8 @@
-import { draggableIsOutside, getPropByDirection, getSiblings, getTransform, getWindowScroll } from '../../utils/GetStyles';
-import { moveTranslate } from '../../utils/SetStyles';
+import { draggableIsOutside, getAxisValue, getBefore, getDistanceValue, getRect, getSiblings, getTransform, getWindowScroll, isSameNode } from '../../utils/GetStyles';
+import { moveTranslate, removeTranslateWhitoutTransition } from '../../utils/SetStyles';
 import getTranslationByDragging from './getTranslationByDraggingAndEvent';
 import getTranslateBeforeDropping from './getTranslateBeforeDropping';
-import { DRAG_EVENT, START_DRAG_EVENT, START_DROP_EVENT, TEMP_CHILD_CLASS } from '../../utils';
+import { DRAG_EVENT, NONE_TRANSLATE, START_DRAG_EVENT, START_DROP_EVENT, TEMP_CHILD_CLASS } from '../../utils';
 import { IsHTMLElement } from '../../utils/typesCheckers';
 import { removeTempChild } from '../../tempChildren';
 import { DRAGGABLE_CLASS, DROPPING_CLASS } from '../../utils/classes';
@@ -11,7 +11,7 @@ import { useChangeDraggableStyles } from '../changeDraggableStyles';
 const DELAY_TIME_TO_SWAP = 50;
 export default function useDragAndDropEvents(currentConfig, index, parent, droppableGroupClass, handlerPublisher, endDraggingAction) {
     let actualIndex = index;
-    const { direction, onRemoveAtEvent, animationDuration, draggingClass } = currentConfig;
+    const { onRemoveAtEvent, animationDuration, draggingClass } = currentConfig;
     const [removeElementDraggingStyles, toggleDraggingClass, dragEventOverElement] = useChangeDraggableStyles(currentConfig, handlerPublisher, endDraggingAction);
     const emitDraggingEvent = (draggedElement, event, droppableConfig) => {
         if (!droppableConfig) {
@@ -19,29 +19,29 @@ export default function useDragAndDropEvents(currentConfig, index, parent, dropp
         }
         const { droppable, config } = droppableConfig;
         const tranlation = getTranslationByDragging(draggedElement, event, config.direction, droppable);
-        emitDraggingEventToSiblings(draggedElement, event, tranlation, droppableConfig);
+        emitDraggingEventToSiblings(draggedElement, event, tranlation, droppable, config);
     };
     const emitDroppingEvent = (draggedElement, event, droppableConfig, initialWindowScroll, positionOnSourceDroppable) => {
         if (!droppableConfig) {
             return;
         }
-        const { droppable, config } = droppableConfig;
+        const { droppable, scroll, config } = droppableConfig;
         const tranlation = getTranslationByDragging(draggedElement, event, config.direction, droppable);
-        emitDroppingEventToSiblings(draggedElement, event, tranlation, initialWindowScroll, droppableConfig, positionOnSourceDroppable);
+        emitDroppingEventToSiblings(draggedElement, event, tranlation, initialWindowScroll, droppable, scroll, config, positionOnSourceDroppable);
     };
     // #region Drag events
-    const emitDraggingEventToSiblings = (draggedElement, event, translation, droppableConfig) => {
-        const { config, droppable } = droppableConfig;
+    const emitDraggingEventToSiblings = (draggedElement, event, translation, droppable, config) => {
         const [siblings] = getSiblings(draggedElement, droppable);
         const isOutside = draggableIsOutside(draggedElement, droppable);
+        const { direction } = config;
         if (siblings.length == 0) {
-            updateActualIndexBaseOnTranslation(translation, 1, config.direction, siblings);
+            updateActualIndexBaseOnTranslation(translation, 1, direction, siblings);
         }
         for (const [index, sibling] of siblings.entries()) {
             if (!containClass(sibling, DRAGGABLE_CLASS)) {
                 continue;
             }
-            const siblingTransition = canChangeDraggable(config.direction, draggedElement, sibling, translation);
+            const siblingTransition = canChangeDraggable(direction, draggedElement, sibling, translation);
             if (!isOutside && siblingTransition) {
                 translation = siblingTransition;
             }
@@ -49,9 +49,9 @@ export default function useDragAndDropEvents(currentConfig, index, parent, dropp
                 continue;
             }
             const siblingRealIndex = siblings.length - index;
-            updateActualIndexBaseOnTranslation(translation, siblingRealIndex, config.direction, siblings);
+            updateActualIndexBaseOnTranslation(translation, siblingRealIndex, direction, siblings);
             if (event === START_DRAG_EVENT) {
-                startDragEventOverElement(sibling, translation);
+                moveTranslate(sibling, translation);
             }
             else if (event === DRAG_EVENT) {
                 dragEventOverElement(sibling, translation);
@@ -59,24 +59,23 @@ export default function useDragAndDropEvents(currentConfig, index, parent, dropp
         }
     };
     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 currentPosition = getBefore(direction, currentBoundingClientRect);
+        const targetPosition = getBefore(direction, targetBoundingClientRect);
+        const [targetSize] = getDistanceValue(direction, targetBoundingClientRect);
         const targetMiddle = targetPosition + targetSize / 2;
-        const targetTransform = getTransform(targetElement)[axis];
+        const targetTransform = getAxisValue(direction, getTransform(targetElement));
         const targetMiddleWithoutTransform = targetMiddle - targetTransform;
         if (currentPosition > targetMiddleWithoutTransform) {
-            return { height: 0, width: 0 };
+            return NONE_TRANSLATE;
         }
         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) {
+        const [distance] = getDistanceValue(direction, translation);
+        if (distance == 0) {
             actualIndex = Math.max(actualIndex, siblingIndex);
         }
         else {
@@ -84,13 +83,8 @@ export default function useDragAndDropEvents(currentConfig, index, parent, dropp
         }
         actualIndex = Math.min(actualIndex, itemsCount);
     };
-    const startDragEventOverElement = (element, translation) => {
-        const { width, height } = translation;
-        moveTranslate(element, height, width);
-    };
     // #region Drop events
-    const emitDroppingEventToSiblings = (draggedElement, event, translation, initialWindowScroll, droppableConfig, positionOnSourceDroppable) => {
-        const { droppable, scroll, config } = droppableConfig;
+    const emitDroppingEventToSiblings = (draggedElement, event, translation, initialWindowScroll, droppable, scroll, config, positionOnSourceDroppable) => {
         const [siblings, positionOnDroppable] = getSiblings(draggedElement, droppable);
         const allSiblings = siblings.toReversed();
         const realPositionOnDroppable = positionOnDroppable === -1 ? allSiblings.length : positionOnDroppable;
@@ -105,7 +99,7 @@ export default function useDragAndDropEvents(currentConfig, index, parent, dropp
         for (const [index, sibling] of siblings.toReversed().entries()) {
             let newTranslation = translation;
             if (targetIndex - 1 >= index) {
-                newTranslation = { height: 0, width: 0 };
+                newTranslation = NONE_TRANSLATE;
             }
             if (event === START_DROP_EVENT && !containClass(sibling, TEMP_CHILD_CLASS)) {
                 startDropEventOverElement(sibling, newTranslation, draggedElement, draggableTranslation);
@@ -133,8 +127,8 @@ export default function useDragAndDropEvents(currentConfig, index, parent, dropp
         return [previousElement, nextElement, targetIndex];
     };
     const startDropEventOverElement = (targetElement, translation, element, sourceElementTranlation) => {
-        moveTranslate(targetElement, translation.height, translation.width);
-        moveTranslate(element, sourceElementTranlation.height, sourceElementTranlation.width);
+        moveTranslate(targetElement, translation);
+        moveTranslate(element, sourceElementTranlation);
     };
     const dropEventOverElement = (targetIndex, element, config, droppable, positionOnSourceDroppable) => {
         const { onInsertEvent, onDragEnd } = config;
@@ -177,7 +171,7 @@ export default function useDragAndDropEvents(currentConfig, index, parent, dropp
         }, animationDuration);
     };
     const removeTempChildOnDroppables = (parent, droppable) => {
-        if (parent.isSameNode(droppable)) {
+        if (isSameNode(parent, droppable)) {
             removeTempChild(parent, animationDuration);
         }
         else {
@@ -186,16 +180,16 @@ export default function useDragAndDropEvents(currentConfig, index, parent, dropp
         }
     };
     const reduceTempchildSize = (droppable) => {
-        if (parent.isSameNode(droppable)) {
+        if (isSameNode(parent, droppable)) {
             return;
         }
         var [lastChildren] = parent.querySelectorAll(`.${TEMP_CHILD_CLASS}`);
         if (!lastChildren) {
             return;
         }
-        const { distance } = getPropByDirection(direction);
         if (IsHTMLElement(lastChildren)) {
-            lastChildren.style[distance] = '0px';
+            lastChildren.style.height = '0px';
+            lastChildren.style.width = '0px';
         }
     };
     const removeTranslateFromSiblings = (element, parent) => {
@@ -204,11 +198,5 @@ export default function useDragAndDropEvents(currentConfig, index, parent, dropp
             removeTranslateWhitoutTransition(sibling);
         }
     };
-    const removeTranslateWhitoutTransition = (element) => {
-        if (IsHTMLElement(element)) {
-            element.style.transition = '';
-            element.style.transform = '';
-        }
-    };
     return [emitDraggingEvent, emitDroppingEvent, toggleDraggingClass];
 }

package/dist/core/events/dragAndDrop/getTranslateBeforeDropping.js

@@ -1,11 +1,11 @@
 import { HORIZONTAL, VERTICAL } from '../..';
-import { getPropByDirection, getValueFromProperty } from '../../utils/GetStyles';
-import { gapAndDisplayInformation, getBeforeStyles } from '../../utils/ParseStyles';
+import { getAfterMargin, getAxisValue, getBeforeMargin, getBorderBeforeWidthValue, getDistanceValue, getPropByDirection, getRect, getScrollElementValue, getScrollValue, getValueFromProperty } from '../../utils/GetStyles';
+import { getBeforeStyles, getGapInfo } from '../../utils/ParseStyles';
 const getContentPosition = (direction, droppable) => {
-    const { borderBeforeWidth, paddingBefore, axis, getRect } = getPropByDirection(direction);
-    const borderBeforeWidthDroppable = getValueFromProperty(droppable, borderBeforeWidth);
+    const { paddingBefore } = getPropByDirection(direction);
+    const borderBeforeWidthDroppable = getBorderBeforeWidthValue(direction, droppable);
     const paddingBeforeDroppable = getValueFromProperty(droppable, paddingBefore);
-    const axisValue = getRect(droppable)[axis];
+    const axisValue = getAxisValue(direction, getRect(droppable));
     return borderBeforeWidthDroppable + paddingBeforeDroppable + axisValue;
 };
 const getGroupTranslate = (droppable, draggable) => {
@@ -27,14 +27,14 @@ export default function getTranslateBeforeDropping(direction, siblings, sourceIn
         height += y;
         width += x;
     }
-    const { scrollElement, beforeMargin: beforeMarginProp, afterMargin: afterMarginProp, distance: spaceProp, gap: gapStyle } = getPropByDirection(direction);
-    const [gap, hasGaps] = gapAndDisplayInformation(droppable, gapStyle);
-    const [afterMarginOutside, beforeMarginOutside, spaceBeforeDraggedElement] = getBeforeAfterMarginBaseOnDraggedDirection(beforeMarginProp, afterMarginProp, sourceElement, targetElement?.previousElementSibling, isDraggedFoward, hasGaps, isGroupDropping);
-    const [beforeSpace, space, afterSpace] = spaceWithMargins(beforeMarginProp, afterMarginProp, spaceProp, siblingsBetween, gap, hasGaps);
+    const [gap, hasGaps] = getGapInfo(droppable, direction);
+    const [afterMarginOutside, beforeMarginOutside, spaceBeforeDraggedElement] = getBeforeAfterMarginBaseOnDraggedDirection(sourceElement, targetElement?.previousElementSibling, isDraggedFoward, hasGaps, isGroupDropping, direction);
+    const [beforeSpace, space, afterSpace] = spaceWithMargins(siblingsBetween, gap, hasGaps, direction);
     const spaceBetween = getSpaceBetween(space, beforeSpace, afterSpace, beforeMarginOutside, afterMarginOutside, gap);
+    const [scrollElementValue] = getScrollElementValue(direction, droppable);
     const scrollChange = isGroupDropping
-        ? droppable[scrollElement]
-        : getScrollChange(scrollElement, droppable, previousScroll);
+        ? scrollElementValue
+        : getScrollChange(droppable, previousScroll, direction);
     const spaceCalc = isDraggedFoward
         ? spaceBetween - spaceBeforeDraggedElement
         : spaceBeforeDraggedElement - spaceBetween;
@@ -47,9 +47,9 @@ export default function getTranslateBeforeDropping(direction, siblings, sourceIn
     }
     return addScrollToTranslate({ height, width }, direction, scroll, initialWindowScroll, isGroupDropping);
 }
-const getScrollChange = (scrollElement, parentElement, previousScroll) => {
-    const scrollParent = parentElement[scrollElement];
-    const previousScrollValue = previousScroll[scrollElement];
+const getScrollChange = (parentElement, previousScroll, direction) => {
+    const [scrollParent] = getScrollElementValue(direction, parentElement);
+    const [previousScrollValue] = getScrollElementValue(direction, previousScroll);
     return scrollParent - previousScrollValue;
 };
 const getSpaceBetween = (innerSpace, beforeMarginSpace, afterMarginSpace, beforeMarginOutside, afterMarginOutside, gap) => {
@@ -70,16 +70,16 @@ const getElementsRange = (siblings, sourceIndex, targetIndex, draggable) => {
     }
     return [sourceElement, targetElement, siblingsBetween, isDraggedFoward];
 };
-const spaceWithMargins = (beforeMargin, afterMargin, distance, siblings, gap, hasGaps) => {
+const spaceWithMargins = (siblings, gap, hasGaps, direction) => {
     if (siblings.length == 0) {
         return [0, 0, 0];
     }
-    const beforeSpace = getValueFromProperty(siblings[0], beforeMargin);
+    const beforeSpace = getAfterMargin(direction, siblings[0]);
     let afterSpace = 0;
     let space = -beforeSpace;
     for (const [index, sibling] of siblings.entries()) {
-        const siblingSpace = sibling.getBoundingClientRect()[distance];
-        const siblingBeforeMargin = getValueFromProperty(sibling, beforeMargin);
+        const [siblingSpace] = getDistanceValue(direction, getRect(sibling));
+        const siblingBeforeMargin = getBeforeMargin(direction, sibling);
         if (hasGaps) {
             afterSpace += siblingBeforeMargin;
         }
@@ -90,32 +90,32 @@ const spaceWithMargins = (beforeMargin, afterMargin, distance, siblings, gap, ha
             afterSpace = Math.max(afterSpace, siblingBeforeMargin);
         }
         space += afterSpace + siblingSpace;
-        afterSpace = getValueFromProperty(sibling, afterMargin);
+        afterSpace = getAfterMargin(direction, sibling);
     }
     return [beforeSpace, space, afterSpace];
 };
 const addScrollToTranslate = (translate, direction, initialScroll, initialWindowScroll, isGroupDropping) => {
-    const { scroll, distance } = getPropByDirection(direction);
-    const actualWindowScroll = window[scroll];
-    const initialScrollProp = initialScroll[scroll];
+    const actualWindowScroll = getScrollValue(direction, window);
+    const initialScrollProp = getScrollValue(direction, initialScroll);
     const scrollChange = isGroupDropping
         ? 0
-        : initialScrollProp - 2 * actualWindowScroll + initialWindowScroll[scroll];
+        : initialScrollProp - 2 * actualWindowScroll + getScrollValue(direction, initialWindowScroll);
+    const [, distance] = getDistanceValue(direction, translate);
     translate[distance] += scrollChange;
     return translate;
 };
-const getBeforeAfterMarginBaseOnDraggedDirection = (beforeMarginProp, afterMarginProp, draggedElement, previousElement, isDraggedFoward, hasGaps, isGroupDropping) => {
+const getBeforeAfterMarginBaseOnDraggedDirection = (draggedElement, previousElement, isDraggedFoward, hasGaps, isGroupDropping, direction) => {
     const previousElementByDirection = isDraggedFoward
         ? draggedElement.previousElementSibling
         : previousElement;
-    return getBeforeAfterMargin(beforeMarginProp, afterMarginProp, previousElementByDirection, draggedElement, hasGaps, isGroupDropping);
+    return getBeforeAfterMargin(previousElementByDirection, draggedElement, hasGaps, isGroupDropping, direction);
 };
-const getBeforeAfterMargin = (beforeMarginProp, afterMarginProp, previousElement, nextElement, hasGaps, isGroupDropping) => {
+const getBeforeAfterMargin = (previousElement, nextElement, hasGaps, isGroupDropping, direction) => {
     if (hasGaps) {
         return [0, 0, 0];
     }
-    const afterMargin = getValueFromProperty(isGroupDropping ? null : previousElement, afterMarginProp);
-    const beforeMargin = getValueFromProperty(nextElement, beforeMarginProp);
-    let spaceBeforeDraggedElement = Math.max(afterMargin, beforeMargin);
-    return [afterMargin, beforeMargin, spaceBeforeDraggedElement];
+    const afterMarginValue = getAfterMargin(direction, isGroupDropping ? null : previousElement);
+    const beforeMarginValue = getBeforeMargin(direction, nextElement);
+    let spaceBeforeDraggedElement = Math.max(afterMarginValue, beforeMarginValue);
+    return [afterMarginValue, beforeMarginValue, spaceBeforeDraggedElement];
 };

package/dist/core/events/dragAndDrop/getTranslationByDraggingAndEvent.js

@@ -1,7 +1,7 @@
 import { HORIZONTAL } from '../..';
 import { DRAG_EVENT } from '../../utils';
-import { draggableIsOutside, getPropByDirection, getValueFromProperty } from '../../utils/GetStyles';
-import { gapAndDisplayInformation } from '../../utils/ParseStyles';
+import { draggableIsOutside, getAfterMargin, getBeforeMarginValue, getDistanceValue, getRect } from '../../utils/GetStyles';
+import { getGapInfo } from '../../utils/ParseStyles';
 export default function getTranslationByDraggingAndEvent(current, event, direction, droppable, previousElement = current.previousElementSibling, nextElement = current.nextElementSibling) {
     let { height, width } = getTranslationByDragging(direction, current, previousElement, nextElement);
     const intersection = draggableIsOutside(current, droppable);
@@ -12,24 +12,23 @@ export default function getTranslationByDraggingAndEvent(current, event, directi
     return { height, width };
 }
 const getTranslationByDragging = (direction, current, previous, nextElement) => {
-    const { afterMargin, beforeMargin, distance, gap: gapStyle, getRect } = getPropByDirection(direction);
-    const after = getValueFromProperty(current, afterMargin);
-    const before = getValueFromProperty(current, beforeMargin);
-    const nextBefore = getValueFromProperty(nextElement, beforeMargin);
-    const [gap, hasGaps] = gapAndDisplayInformation(current.parentElement, gapStyle);
-    const space = getRect(current)[distance];
+    const after = getAfterMargin(direction, current);
+    const before = getBeforeMarginValue(direction, current);
+    const nextBefore = getBeforeMarginValue(direction, nextElement);
+    const [gap, hasGaps] = getGapInfo(current.parentElement, direction);
+    const [space] = getDistanceValue(direction, getRect(current));
     if (hasGaps) {
         return getTranslation(space, before, after, gap, 0, direction);
     }
-    const [afterSpace, beforeScace, rest] = getTranslationByDraggingWithoutGaps(previous, nextBefore, after, before, afterMargin);
+    const [afterSpace, beforeScace, rest] = getTranslationByDraggingWithoutGaps(previous, nextBefore, after, before, direction);
     return getTranslation(space, beforeScace, afterSpace, 0, rest, direction);
 };
-const getTranslationByDraggingWithoutGaps = (previousElement, nextBeforeMargin, currentAfterMargin, currentBeforeMargin, afterMargin) => {
+const getTranslationByDraggingWithoutGaps = (previousElement, nextBeforeMargin, currentAfterMargin, currentBeforeMargin, direction) => {
     const afterSpace = Math.max(nextBeforeMargin, currentAfterMargin);
     let beforeScace = currentBeforeMargin;
     let rest = nextBeforeMargin;
     if (previousElement) {
-        const previousAfterMargin = getValueFromProperty(previousElement, afterMargin);
+        const previousAfterMargin = getAfterMargin(direction, previousElement);
         beforeScace = Math.max(previousAfterMargin, currentBeforeMargin);
         rest = Math.max(rest, previousAfterMargin);
     }

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

@@ -1,4 +1,5 @@
 import { CoreConfig } from '../index';
 import HandlerPublisher from '../HandlerPublisher';
-export default function useInsertEvents<T>(currentConfig: CoreConfig<T>, parent: HTMLElement, handlerPublisher: HandlerPublisher, endDraggingAction: () => void): readonly [(targetIndex: number, draggedElement: HTMLElement, droppable: HTMLElement, value: T, startInserting: () => void) => void];
+import { DroppableConfig } from '../config/configHandler';
+export default function useInsertEvents<T>(currentConfig: CoreConfig<T>, parent: HTMLElement, handlerPublisher: HandlerPublisher, endDraggingAction: () => void): readonly [(targetIndex: number, draggedElement: HTMLElement, droppable: HTMLElement, value: T, droppableConfigurator: DroppableConfig<T> | undefined) => void];
 export declare const insertToListEmpty: <T>(config: CoreConfig<T>, droppable: HTMLElement | undefined | null, targetIndex: number, value: T) => void;

package/dist/core/events/insert.js

@@ -1,16 +1,16 @@
 import { getParentDraggableChildren, getSiblings } from '../utils/GetStyles';
 import getTranslationByDragging from '../events/dragAndDrop/getTranslationByDraggingAndEvent';
-import { IsHTMLElement } from '../utils/typesCheckers';
-import { removeTempChild } from '../tempChildren';
+import { addTempChildOnInsert, 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';
+import { removeTranslateWhitoutTransition } from '../utils/SetStyles';
 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 emitInsertEventToSiblings = (targetIndex, draggedElement, droppable, value, droppableConfigurator) => {
         const translation = getTranslationByDragging(draggedElement, 'insert', currentConfig.direction, droppable);
         const { onInsertEvent } = currentConfig;
         const siblings = getParentDraggableChildren(droppable);
@@ -22,7 +22,7 @@ export default function useInsertEvents(currentConfig, parent, handlerPublisher,
                 dragEventOverElement(sibling, translation);
             }
         }
-        startInserting();
+        addTempChildOnInsert(draggedElement, false, droppableConfigurator);
         setTimeout(() => {
             onInsertEvent(targetIndex, value);
             onFinishInsertElement(targetIndex, droppable, currentConfig);
@@ -37,12 +37,6 @@ export default function useInsertEvents(currentConfig, parent, handlerPublisher,
             removeTranslateWhitoutTransition(sibling);
         }
     };
-    const removeTranslateWhitoutTransition = (element) => {
-        if (IsHTMLElement(element)) {
-            element.style.transition = '';
-            element.style.transform = '';
-        }
-    };
     return [emitInsertEventToSiblings];
 }
 const childrenMutationFilter = (mutation) => {

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

@@ -1,4 +1,4 @@
-import { CoreConfig } from '..';
+import { CoreConfig, DraggingState } 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];
+export default function useRemoveEvents<T>(currentConfig: CoreConfig<T>, parent: HTMLElement, handlerPublisher: HandlerPublisher, endDraggingAction: () => void): readonly [(index: number, targetIndex: number, draggableElement: HTMLElement, draggingState: DraggingState, config: DroppableConfig<T>) => void];