fluid-dnd 2.3.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-BNn5KECH.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-BYT3HBbe.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-xM3zyGAn.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-m7C-XuaH.js";
+import { a as h, t as n, G as t } from "./index-HczUoMBK.js";
 class c {
   constructor() {
     r(this, "handlers");

package/dist/core/{configHandler.d.ts → config/configHandler.d.ts}

@@ -1,5 +1,5 @@
-import { ElementScroll } from "../../index";
-import { CoreConfig } from ".";
+import { ElementScroll } from '../../../index';
+import { CoreConfig } from '..';
 export type DroppableConfig<T> = {
     droppable: HTMLElement;
     config: CoreConfig<T>;

package/dist/core/{configHandler.js → config/configHandler.js}

@@ -1,14 +1,14 @@
-import { getScrollElement } from "./utils/GetStyles";
-import { containstClasses } from "./utils/dom/classList";
+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,
             config,
-            scroll,
+            scroll
         });
         ConfigHandler.configs = configs;
     }
@@ -19,15 +19,14 @@ export default class ConfigHandler {
     static updateScrolls(currentDroppable, droppableGroupClass) {
         for (const configHandler of ConfigHandler.configs) {
             const { droppable } = configHandler;
-            if ((droppableGroupClass &&
-                containstClasses(droppable, droppableGroupClass)) ||
-                droppable.isSameNode(currentDroppable)) {
+            if ((droppableGroupClass && containstClasses(droppable, droppableGroupClass)) ||
+                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/{utils → config}/droppableConfigurator.d.ts

@@ -1,6 +1,6 @@
-import { DroppableConfig } from "../configHandler";
-import { DragMouseTouchEvent } from "../../../index";
-import { MapFrom } from "..";
+import { DroppableConfig } from './configHandler';
+import { DragMouseTouchEvent } from '../../../index';
+import { MapFrom } from '..';
 export declare class DroppableConfigurator<T> {
     initial: DroppableConfig<any> | undefined;
     current: DroppableConfig<T> | undefined;
@@ -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/{utils → config}/droppableConfigurator.js

@@ -1,9 +1,24 @@
-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";
+import ConfigHandler from './configHandler';
+import { draggableIsOutside, isSameNode } from '../utils/GetStyles';
+import { IsHTMLElement } from '../utils/typesCheckers';
+import { setEventWithInterval } from '../utils/SetStyles';
+import { getClassesSelector } from '../utils/dom/classList';
+const MapConfig = (coreConfig, mapFrom) => {
+    const { config, droppable } = coreConfig;
+    const { onInsertEvent, onDragEnd } = config;
+    const mapOnInsertEvent = (index, value) => {
+        return onInsertEvent(index, mapFrom(value, droppable), true);
+    };
+    const mapOnDragEnd = (eventData) => {
+        const { index, value } = eventData;
+        onDragEnd({ index, value: mapFrom(value, droppable) });
+    };
+    return {
+        ...config,
+        onDragEnd: mapOnDragEnd,
+        onInsertEvent: mapOnInsertEvent
+    };
+};
 export class DroppableConfigurator {
     initial;
     current;
@@ -19,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;
         }
@@ -52,7 +58,9 @@ export class DroppableConfigurator {
         return currentDroppable;
     }
     isOutsideOfAllDroppables(currentElement) {
-        const droppables = this.groupClass ? Array.from(document.querySelectorAll(getClassesSelector(this.groupClass))) : [this.parent];
+        const droppables = this.groupClass
+            ? Array.from(document.querySelectorAll(getClassesSelector(this.groupClass)))
+            : [this.parent];
         return droppables.every((droppable) => draggableIsOutside(currentElement, droppable));
     }
     isNotInsideAnotherDroppable(currentElement, droppable) {
@@ -62,16 +70,17 @@ export class DroppableConfigurator {
     onScrollEvent() {
         this.dragEvent();
     }
-    ;
     setOnScroll(droppable) {
-        setEventWithInterval(droppable, "onscroll", () => { this.onScrollEvent(); });
+        setEventWithInterval(droppable, 'onscroll', () => {
+            this.onScrollEvent();
+        });
     }
     getConfigFrom(element) {
         const coreConfig = ConfigHandler.getConfig(element);
         if (!coreConfig) {
             return undefined;
         }
-        if (element.isSameNode(this.parent)) {
+        if (isSameNode(this.parent, element)) {
             return coreConfig;
         }
         return {
@@ -79,13 +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;
+        const currentDroppable = this.getCurrent(currentElement, event);
         if (this.current &&
-            this.isNotInsideAnotherDroppable(currentElement, this.current?.droppable)) {
+            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);
         }
@@ -99,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/dragAndDrop.d.ts

@@ -1,4 +1,4 @@
-import { ListCondig } from ".";
-import { Config } from ".";
-import HandlerPublisher from "./HandlerPublisher";
+import { ListCondig } from '.';
+import { Config } from '.';
+import HandlerPublisher from './HandlerPublisher';
 export default function dragAndDrop<T>(listCondig: ListCondig<T>, handlerPublisher: HandlerPublisher, config?: Config<T>, indexAttr?: string): readonly [(index: number) => void, (index: number, value: T) => void, (parent: HTMLElement | null | undefined) => MutationObserver | undefined];

package/dist/core/dragAndDrop.js

@@ -1,10 +1,48 @@
-import { getConfig } from "./utils/config";
-import useDroppable from "./useDroppable";
-import ConfigHandler from "./configHandler";
-import { observeMutation } from "./utils/observer";
-import { addClass } from "./utils/dom/classList";
-import { DROPPABLE_CLASS } from "./utils/classes";
-import { isTempElement } from "./utils/tempChildren";
+import { VERTICAL } from '.';
+import useDroppable from './useDroppable';
+import ConfigHandler from './config/configHandler';
+import { isTempElement, observeMutation } from './utils/observer';
+import { addClass } from './utils/dom/classList';
+import { DRAGGABLE_CLASS, DROPPABLE_CLASS } from './utils/classes';
+const getConfig = (listCondig, config) => {
+    const onRemoveAtEvent = (index, sync) => {
+        return listCondig.removeAtEvent(index, sync);
+    };
+    const onInsertEvent = (index, value, sync) => {
+        return listCondig.insertEvent(index, value, sync);
+    };
+    const onGetLegth = () => {
+        return listCondig.getLength();
+    };
+    const onGetValue = (index) => {
+        return listCondig.getValue(index);
+    };
+    const defaultMapFrom = (object) => {
+        return object;
+    };
+    return {
+        direction: config?.direction ?? VERTICAL,
+        handlerSelector: config?.handlerSelector ?? DRAGGABLE_CLASS,
+        draggingClass: config?.draggingClass ?? 'dragging',
+        droppableClass: config?.droppableClass ?? 'droppable-hover',
+        isDraggable: config?.isDraggable ?? (() => true),
+        onDragStart: config?.onDragStart ?? (() => { }),
+        onDragEnd: config?.onDragEnd ?? (() => { }),
+        droppableGroup: config?.droppableGroup,
+        onRemoveAtEvent,
+        onInsertEvent,
+        onGetLegth,
+        onGetValue,
+        animationDuration: config?.animationDuration ?? 200,
+        removingClass: config?.removingClass ?? 'removing',
+        insertingFromClass: config?.insertingFromClass ?? 'from-inserting',
+        delayBeforeRemove: config?.delayBeforeRemove ?? 200,
+        delayBeforeInsert: config?.delayBeforeInsert ?? 200,
+        mapFrom: config?.mapFrom ?? defaultMapFrom,
+        delayBeforeTouchMoveEvent: config?.delayBeforeTouchMoveEvent ?? 150,
+        coordinateTransform: config?.coordinateTransform ?? [(coordinate) => coordinate]
+    };
+};
 export default function dragAndDrop(listCondig, handlerPublisher, config, indexAttr = 'index') {
     let removeAtFromElements = [];
     let insertAtFromElements = [];
@@ -32,8 +70,14 @@ export default function dragAndDrop(listCondig, handlerPublisher, config, indexA
         insertAtFromElements = insertAtFromElementList;
     };
     const childrenMutationFilter = (mutation) => {
-        const addedNodes = mutation.addedNodes.values().filter((element) => !isTempElement(element)).toArray();
-        const removedNodes = mutation.removedNodes.values().filter((element) => !isTempElement(element)).toArray();
+        const addedNodes = mutation.addedNodes
+            .values()
+            .filter((element) => !isTempElement(element))
+            .toArray();
+        const removedNodes = mutation.removedNodes
+            .values()
+            .filter((element) => !isTempElement(element))
+            .toArray();
         return addedNodes.length > 0 || removedNodes.length > 0;
     };
     const observeChildrens = (parent) => {

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

@@ -0,0 +1,4 @@
+import { Translate } from 'index';
+import { CoreConfig } from '..';
+import HandlerPublisher from '../HandlerPublisher';
+export declare const useChangeDraggableStyles: <T>(currentConfig: CoreConfig<T>, handlerPublisher: HandlerPublisher, endDraggingAction: () => void) => readonly [(element: HTMLElement) => void, (element: Element, force: boolean) => void, (element: Element, translation: Translate) => void];

package/dist/core/events/changeDraggableStyles.js

@@ -0,0 +1,38 @@
+import { DRAGGING_CLASS, DRAGGING_HANDLER_CLASS, GRABBING_CLASS } from '../utils/classes';
+import { toggleClass } from '../utils/dom/classList';
+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);
+        removeTranslateWhitoutTransition(element);
+        element.style.top = '';
+        element.style.left = '';
+        setCustomFixedSize(element, {
+            fixedHeight: '',
+            fixedWidth: ''
+        });
+    };
+    const toggleDraggingClass = (element, force) => {
+        toggleClass(element, DRAGGING_CLASS, force);
+        toogleHandlerDraggingClass(force, element);
+        handlerPublisher.toggleGrabClass(!force);
+    };
+    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 dragEventOverElement = (element, translation) => {
+        setTranistion(element, animationDuration, draggableTargetTimingFunction);
+        moveTranslate(element, translation);
+    };
+    return [removeElementDraggingStyles, toggleDraggingClass, dragEventOverElement];
+};

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

@@ -0,0 +1,9 @@
+import { WindowScroll } from '../../../../index';
+import { CoreConfig } from '../..';
+import { DRAG_EVENT, START_DRAG_EVENT, START_DROP_EVENT } from '../../utils';
+import { DroppableConfig } from '../../config/configHandler';
+import HandlerPublisher from '../../HandlerPublisher';
+type DraggingEvent = typeof DRAG_EVENT | typeof START_DRAG_EVENT;
+type DropEvent = 'drop' | typeof START_DROP_EVENT;
+export default function useDragAndDropEvents<T>(currentConfig: CoreConfig<T>, index: number, parent: HTMLElement, droppableGroupClass: string | null, handlerPublisher: HandlerPublisher, endDraggingAction: () => void): readonly [(draggedElement: HTMLElement, event: DraggingEvent, droppableConfig: DroppableConfig<T> | undefined) => void, (draggedElement: HTMLElement, event: DropEvent, droppableConfig: DroppableConfig<T> | undefined, initialWindowScroll: WindowScroll, positionOnSourceDroppable?: number) => void, (element: Element, force: boolean) => void];
+export {};

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

@@ -0,0 +1,202 @@
+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, 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';
+import { addClass, containClass, getClassesSelector, removeClass } from '../../utils/dom/classList';
+import { useChangeDraggableStyles } from '../changeDraggableStyles';
+const DELAY_TIME_TO_SWAP = 50;
+export default function useDragAndDropEvents(currentConfig, index, parent, droppableGroupClass, handlerPublisher, endDraggingAction) {
+    let actualIndex = index;
+    const { onRemoveAtEvent, animationDuration, draggingClass } = currentConfig;
+    const [removeElementDraggingStyles, toggleDraggingClass, dragEventOverElement] = useChangeDraggableStyles(currentConfig, handlerPublisher, endDraggingAction);
+    const emitDraggingEvent = (draggedElement, event, droppableConfig) => {
+        if (!droppableConfig) {
+            return;
+        }
+        const { droppable, config } = droppableConfig;
+        const tranlation = getTranslationByDragging(draggedElement, event, config.direction, droppable);
+        emitDraggingEventToSiblings(draggedElement, event, tranlation, droppable, config);
+    };
+    const emitDroppingEvent = (draggedElement, event, droppableConfig, initialWindowScroll, positionOnSourceDroppable) => {
+        if (!droppableConfig) {
+            return;
+        }
+        const { droppable, scroll, config } = droppableConfig;
+        const tranlation = getTranslationByDragging(draggedElement, event, config.direction, droppable);
+        emitDroppingEventToSiblings(draggedElement, event, tranlation, initialWindowScroll, droppable, scroll, config, positionOnSourceDroppable);
+    };
+    // #region Drag events
+    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, direction, siblings);
+        }
+        for (const [index, sibling] of siblings.entries()) {
+            if (!containClass(sibling, DRAGGABLE_CLASS)) {
+                continue;
+            }
+            const siblingTransition = canChangeDraggable(direction, draggedElement, sibling, translation);
+            if (!isOutside && siblingTransition) {
+                translation = siblingTransition;
+            }
+            else if (!isOutside) {
+                continue;
+            }
+            const siblingRealIndex = siblings.length - index;
+            updateActualIndexBaseOnTranslation(translation, siblingRealIndex, direction, siblings);
+            if (event === START_DRAG_EVENT) {
+                moveTranslate(sibling, translation);
+            }
+            else if (event === DRAG_EVENT) {
+                dragEventOverElement(sibling, translation);
+            }
+        }
+    };
+    const canChangeDraggable = (direction, sourceElement, targetElement, translation) => {
+        const currentBoundingClientRect = getRect(sourceElement);
+        const targetBoundingClientRect = getRect(targetElement);
+        const currentPosition = getBefore(direction, currentBoundingClientRect);
+        const targetPosition = getBefore(direction, targetBoundingClientRect);
+        const [targetSize] = getDistanceValue(direction, targetBoundingClientRect);
+        const targetMiddle = targetPosition + targetSize / 2;
+        const targetTransform = getAxisValue(direction, getTransform(targetElement));
+        const targetMiddleWithoutTransform = targetMiddle - targetTransform;
+        if (currentPosition > targetMiddleWithoutTransform) {
+            return NONE_TRANSLATE;
+        }
+        return translation;
+    };
+    const updateActualIndexBaseOnTranslation = (translation, siblingIndex, direction, siblings) => {
+        const itemsCount = siblings.filter((sibling) => containClass(sibling, DRAGGABLE_CLASS)).length;
+        const [distance] = getDistanceValue(direction, translation);
+        if (distance == 0) {
+            actualIndex = Math.max(actualIndex, siblingIndex);
+        }
+        else {
+            actualIndex = Math.min(actualIndex, siblingIndex - 1);
+        }
+        actualIndex = Math.min(actualIndex, itemsCount);
+    };
+    // #region Drop events
+    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;
+        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 = NONE_TRANSLATE;
+            }
+            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);
+        moveTranslate(element, sourceElementTranlation);
+    };
+    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 (isSameNode(parent, droppable)) {
+            removeTempChild(parent, animationDuration);
+        }
+        else {
+            removeTempChild(parent, animationDuration, true);
+            removeTempChild(droppable, animationDuration);
+        }
+    };
+    const reduceTempchildSize = (droppable) => {
+        if (isSameNode(parent, droppable)) {
+            return;
+        }
+        var [lastChildren] = parent.querySelectorAll(`.${TEMP_CHILD_CLASS}`);
+        if (!lastChildren) {
+            return;
+        }
+        if (IsHTMLElement(lastChildren)) {
+            lastChildren.style.height = '0px';
+            lastChildren.style.width = '0px';
+        }
+    };
+    const removeTranslateFromSiblings = (element, parent) => {
+        const [siblings] = getSiblings(element, parent);
+        for (const sibling of [...siblings, element]) {
+            removeTranslateWhitoutTransition(sibling);
+        }
+    };
+    return [emitDraggingEvent, emitDroppingEvent, toggleDraggingClass];
+}

package/dist/core/{utils/translate/GetTranslateBeforeDropping.d.ts → events/dragAndDrop/getTranslateBeforeDropping.d.ts}

@@ -1,5 +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;