fluid-dnd 2.0.1 → 2.1.0

package/README.md

@@ -11,23 +11,22 @@
 [![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)
-[![twitter](https://img.shields.io/twitter/follow/carlosjorgerc)](https://twitter.com/carlosjorgerc)
 [![test_coverage](https://api.codeclimate.com/v1/badges/6b27047dcf150ccddfac/test_coverage)](https://codeclimate.com/github/carlosjorger/fluid-dnd/test_coverage)
 
 </div>
 
-Fluid DnD is a [**fluid**, **agnostic** and **versatil** drag and drop
-library for lists with support for Vue, react and Svelte](https://fluid-dnd.netlify.app/). It's a **lightweight** tool ~7 Kb (gzip) with no depenencies.
+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.
 
-<img src="https://github.com/user-attachments/assets/b350f9a4-7dd7-40ca-ae3f-ecca166a9081" width="100%"/>
+<img src="https://github.com/user-attachments/assets/1b7ac5e3-48e9-43f9-a577-e78c6b9eacae" width="100%"/>
 
 ## 🧰 Features
 
 - ✅ **Fully customizable 🎨**.
 - ✅ **Zero dependencies 🪶**.
-- ✅ **Work with horizontal➡️and vertical list :arrow_down:**.
+- ✅ **Works with horizontal➡️and vertical list⬇️**.
 - ✅ **Mouse 🐭 and touch 👉📱 (mobile, tablet and so on) support**.
-- ✅ **Nice documentation 📑 and examples**.
+- ✅ **Clear documentation 📑 and examples**.
 - ✅ **Fully tested 🧪, typed and reliable**.
 
 ## ✨ Inspirations
@@ -54,8 +53,8 @@ library for lists with support for Vue, react and Svelte](https://fluid-dnd.netl
 3. **Documentation**
 
 - 📚 Check out all the [docs](https://fluid-dnd.netlify.app/).
-- 🛠️ Edit the previous [here](https://codesandbox.io/s/nifty-hooks-5plkpl).
-- 📘 See others examples [here](https://fluid-dnd.netlify.app/vue/example/vertical-list/single-vertical-list/).
+- 🛠️ 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
@@ -64,7 +63,7 @@ library for lists with support for Vue, react and Svelte](https://fluid-dnd.netl
 
 ## 🤝 Contributing
 
-If you're interested in contributing to [fluid-dnd](https://github.com/carlosjorger/fluid-dnd), please read our contributing docs before submitting a pull request [CONTRIBUTING](./CONTRIBUTING.md).
+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
 

package/dist/{HandlerPublisher-C-jTncuG.cjs → HandlerPublisher-CsD6p60X.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-DNmnvxhi.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-DE3X7xW4.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-BYI2bw4n.js → HandlerPublisher-LAmM6gCQ.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-BQUYvZRn.js";
+import { a as h, t as n, G as t } from "./index-D_kOy-fH.js";
 class c {
   constructor() {
     r(this, "handlers");

package/dist/core/HandlerPublisher.js

@@ -0,0 +1,20 @@
+import { GRAB_CLASS } from "./utils/classes";
+import { addClass, toggleClass } from "./utils/dom/classList";
+export default class HandlerPublisher {
+    handlers;
+    constructor() {
+        this.handlers = [];
+    }
+    addSubscriber(subscriber) {
+        if (this.handlers.includes(subscriber)) {
+            return;
+        }
+        this.handlers.push(subscriber);
+        addClass(subscriber, GRAB_CLASS);
+    }
+    toggleGrabClass(force) {
+        for (const handler of this.handlers) {
+            toggleClass(handler, GRAB_CLASS, force);
+        }
+    }
+}

package/dist/core/configHandler.d.ts

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

@@ -0,0 +1,33 @@
+import { getScrollElement } 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 scroll = getScrollElement(droppable);
+        configs.push({
+            droppable,
+            config,
+            scroll,
+        });
+        ConfigHandler.configs = configs;
+    }
+    static removeObsoleteConfigs = () => {
+        const notObsoltete = ConfigHandler.configs.filter(({ droppable }) => document.contains(droppable));
+        ConfigHandler.configs = notObsoltete;
+    };
+    static updateScrolls(currentDroppable, droppableGroupClass) {
+        for (const configHandler of ConfigHandler.configs) {
+            const { droppable } = configHandler;
+            if ((droppableGroupClass &&
+                containstClasses(droppable, droppableGroupClass)) ||
+                droppable.isSameNode(currentDroppable)) {
+                configHandler.scroll = getScrollElement(droppable);
+            }
+        }
+    }
+    static getConfig(curerntDroppable) {
+        const config = ConfigHandler.configs.find(({ droppable }) => droppable.isSameNode(curerntDroppable));
+        return config;
+    }
+}

package/dist/core/dragAndDrop.d.ts

@@ -1,4 +1,4 @@
-import { ListCondig, Config } from '.';
-import { default as 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

@@ -0,0 +1,62 @@
+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";
+export default function dragAndDrop(listCondig, handlerPublisher, config, indexAttr = 'index') {
+    let removeAtFromElements = [];
+    let insertAtFromElements = [];
+    let currentObserver;
+    const coreConfig = getConfig(listCondig, config);
+    const removeAt = (index) => {
+        for (const removeAtFromElement of removeAtFromElements) {
+            removeAtFromElement(index);
+        }
+    };
+    const insertAt = (index, value) => {
+        const listLegth = coreConfig.onGetLegth();
+        if (listLegth === 0) {
+            listCondig.insertToListEmpty(coreConfig, index, value);
+        }
+        else {
+            for (const insertAtFromElement of insertAtFromElements) {
+                insertAtFromElement(index, value);
+            }
+        }
+    };
+    const makeChildrensDraggable = (parent) => {
+        const [removeAtFromElementList, insertAtFromElementList] = useDroppable(coreConfig, handlerPublisher, parent, indexAttr);
+        removeAtFromElements = removeAtFromElementList;
+        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();
+        return addedNodes.length > 0 || removedNodes.length > 0;
+    };
+    const observeChildrens = (parent) => {
+        currentObserver = observeMutation(() => {
+            makeChildrensDraggable(parent);
+        }, parent, { childList: true }, childrenMutationFilter);
+    };
+    const makeDroppable = (parent) => {
+        addClass(parent, DROPPABLE_CLASS);
+    };
+    const addConfigHandler = (parent) => {
+        ConfigHandler.addConfig(parent, coreConfig);
+    };
+    const onChangeParent = (parent) => {
+        if (!parent) {
+            return;
+        }
+        makeDroppable(parent);
+        addConfigHandler(parent);
+        observeChildrens(parent);
+        makeChildrensDraggable(parent);
+        ConfigHandler.removeObsoleteConfigs();
+        return currentObserver;
+    };
+    return [removeAt, insertAt, onChangeParent];
+}

package/dist/core/index.d.ts

@@ -89,6 +89,10 @@ export interface Config<T> {
      * Map value when is passed from the current list to another.
      */
     mapFrom?: MapFrom<T>;
+    /**
+     * The delay before the touchmove event is fired.
+     */
+    delayBeforeTouchMoveEvent: number;
 }
 /**
  * onDrop event function.
@@ -156,5 +160,12 @@ export type CoreConfig<T> = {
     onInsertEvent: OnInsertEvent<T>;
     onGetLegth: OnGetLength;
     onGetValue: OnGetValue<T>;
+    /**
+     * Map value when is passed from the current list to another.
+     */
     mapFrom: MapFrom<T>;
+    /**
+     * The delay before the touchmove event is fired.
+     */
+    delayBeforeTouchMoveEvent: number;
 };

package/dist/core/index.js

@@ -0,0 +1,2 @@
+export const HORIZONTAL = "horizontal";
+export const VERTICAL = "vertical";

package/dist/core/useDraggable.d.ts

@@ -1,4 +1,3 @@
-import { CoreConfig } from '.';
-import { default as HandlerPublisher } from './HandlerPublisher';
-
+import { CoreConfig } from ".";
+import HandlerPublisher from "./HandlerPublisher";
 export default function useDraggable<T>(draggableElement: HTMLElement, index: number, config: CoreConfig<T>, parent: HTMLElement, handlerPublisher: HandlerPublisher): readonly [(targetIndex: number) => void, (targetIndex: number, value: T) => void];

package/dist/core/useDraggable.js

@@ -0,0 +1,335 @@
+import { assignDraggingEvent, convetEventToDragMouseTouchEvent, moveTranslate, setCustomFixedSize, setEventWithInterval, setTranistion, } from "./utils/SetStyles";
+import { useTransform } from "./utils/SetTransform";
+import useEmitEvents from "./utils/events/emitEvents";
+import { DRAG_EVENT, draggableTargetTimingFunction, START_DRAG_EVENT, START_DROP_EVENT } from "./utils";
+import ConfigHandler from "./configHandler";
+import { IsHTMLElement, isTouchEvent } from "./utils/touchDevice";
+import { addTempChild, addTempChildOnInsert, removeTempChildrens } from "./utils/tempChildren";
+import { DroppableConfigurator } from "./utils/droppableConfigurator";
+import { addClass, containClass, getClassesList, getClassesSelector, removeClass, toggleClass, } from "./utils/dom/classList";
+import { DRAGGABLE_CLASS, DRAGGING_CLASS, DROPPABLE_CLASS, HANDLER_CLASS } from "./utils/classes";
+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 = {}));
+export default function useDraggable(draggableElement, index, config, parent, handlerPublisher) {
+    const { handlerSelector, isDraggable, droppableGroup, animationDuration, delayBeforeRemove, draggingClass, removingClass, onRemoveAtEvent, droppableClass, onDragStart, delayBeforeTouchMoveEvent } = config;
+    const droppableGroupClass = getClassesList(droppableGroup)
+        .map((classGroup) => `droppable-group-${classGroup}`)
+        .join(" ");
+    let draggingState = DraggingState.NOT_DRAGGING;
+    let windowScroll = {
+        scrollX: 0,
+        scrollY: 0,
+    };
+    let pagePosition = { pageX: 0, pageY: 0 };
+    let delayTimeout;
+    let initialTouch;
+    const [setTransform, updateTransformState] = useTransform(draggableElement);
+    const endDraggingState = () => {
+        draggingState = DraggingState.NOT_DRAGGING;
+    };
+    const [emitEventToSiblings, emitRemoveEventToSiblings, emitInsertEventToSiblings, emitFinishRemoveEventToSiblings, toggleDraggingClass,] = useEmitEvents(config, index, parent, droppableGroupClass, handlerPublisher, endDraggingState);
+    const setDraggable = () => {
+        addClass(draggableElement, DRAGGABLE_CLASS);
+    };
+    const addHandlerClass = (handlerElement) => {
+        addClass(handlerElement, HANDLER_CLASS);
+        handlerPublisher.addSubscriber(handlerElement);
+    };
+    const setHandlerStyles = () => {
+        if (isDraggable(draggableElement)) {
+            const handlerElement = draggableElement.querySelector(handlerSelector);
+            if (handlerElement) {
+                addHandlerClass(handlerElement);
+            }
+            else {
+                addHandlerClass(draggableElement);
+            }
+        }
+    };
+    const setCssStyles = () => {
+        setHandlerStyles();
+        setDraggable();
+    };
+    const getHandler = (element) => {
+        const handler = element?.querySelector(`.${HANDLER_CLASS}`);
+        const handlerParent = handler?.parentElement;
+        if (handler && handlerParent
+            && containClass(handlerParent, DROPPABLE_CLASS)
+            && !handlerParent.isSameNode(parent)) {
+            return null;
+        }
+        return handler;
+    };
+    const setSlotRefElementParams = (element) => {
+        const handlerElement = (getHandler(element) ?? element);
+        if (handlerElement && isDraggable(element)) {
+            assignDraggingEvent(handlerElement, "onmousedown", onmousedown("mousemove", "mouseup"));
+            assignDraggingEvent(handlerElement, "ontouchstart", onmousedown("touchmove", "touchend"), (event) => {
+                initialTouch = {
+                    x: event.touches[0].clientX,
+                    y: event.touches[0].clientY,
+                };
+            });
+            disableMousedownEventFromImages(handlerElement);
+        }
+        if (!element?.isSameNode(handlerElement)) {
+            assignDraggingEvent(element, "onmousedown", 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;
+        });
+    };
+    const setTransformDragEvent = () => {
+        if (pagePosition.pageX == 0 && pagePosition.pageY == 0) {
+            return;
+        }
+        if (!droppableConfigurator.current) {
+            return;
+        }
+        const { droppable, config } = droppableConfigurator.current;
+        setTransform(draggableElement, droppable, pagePosition, config.direction);
+        emitEventToSiblings(draggableElement, DRAG_EVENT, windowScroll, droppableConfigurator.current);
+    };
+    const changeDroppable = (newdDroppableConfig, oldDroppableConfig) => {
+        if (oldDroppableConfig &&
+            draggingState == DraggingState.DRAGING &&
+            !newdDroppableConfig?.droppable.isSameNode(oldDroppableConfig.droppable)) {
+            emitEventToSiblings(draggableElement, DRAG_EVENT, windowScroll, oldDroppableConfig);
+        }
+    };
+    const droppableConfigurator = new DroppableConfigurator(draggableElement, droppableGroupClass, parent, setTransformDragEvent, changeDroppable, config.mapFrom);
+    const toggleDroppableClass = (isOutside) => {
+        if (!droppableConfigurator.current) {
+            return;
+        }
+        const droppables = droppableGroupClass ? Array.from(document.querySelectorAll(getClassesSelector(droppableGroupClass))) : [parent];
+        for (const droppable of droppables) {
+            droppable
+                .classList
+                .toggle(droppableClass, !isOutside && droppable.isSameNode(droppableConfigurator.current.droppable));
+        }
+    };
+    const onMove = (event, isTouchEvent = false) => {
+        droppableConfigurator.updateConfig(event);
+        const isOutside = droppableConfigurator.isOutside(event);
+        toggleDroppableClass(isOutside);
+        if (draggingState === DraggingState.START_DRAGGING && !isTouchEvent) {
+            startDragging(event);
+        }
+        else if (draggingState === DraggingState.DRAGING) {
+            updateTempChildren(isOutside);
+            setTransformEvent(event);
+        }
+    };
+    const updateTempChildren = (isOutside = true) => {
+        if (!droppableConfigurator.current) {
+            return;
+        }
+        const { droppable } = droppableConfigurator.current;
+        removeTempChildrens(droppable, parent, droppableGroupClass, animationDuration, isOutside);
+        if (isOutside) {
+            return;
+        }
+        addTempChild(draggableElement, parent, draggingState == DraggingState.START_DRAGGING, droppableConfigurator.current);
+    };
+    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);
+            if (Math.abs(movedX) > 5 && Math.abs(movedY) > 5) {
+                clearTimeout(delayTimeout);
+                return false;
+            }
+        }
+        return true;
+    };
+    const handleMove = (event) => {
+        clearTimeout(delayTimeout);
+        const eventToDragMouse = convetEventToDragMouseTouchEvent(event);
+        if (isTouchEvent(event) && event.cancelable && draggingState == DraggingState.DRAGING) {
+            event.preventDefault();
+        }
+        if ((isTouchEvent(event) && !event.cancelable)
+            || !cursorWasNotMoved(event)) {
+            disableDragging("touchmove", event);
+            return;
+        }
+        onMove(eventToDragMouse, isTouchEvent(event));
+    };
+    const addTouchDeviceDelay = (event, callback) => {
+        if (event == "touchmove") {
+            delayTimeout = setTimeout(() => {
+                callback();
+            }, delayBeforeTouchMoveEvent);
+        }
+        else {
+            callback();
+        }
+    };
+    const cursorIsOnChildDraggable = (event, element) => {
+        const { clientX, clientY } = event;
+        const elementBelow = document.elementFromPoint(clientX, clientY);
+        const draggableAncestor = elementBelow?.closest(`.${DRAGGABLE_CLASS}`);
+        return draggableAncestor && element.isSameNode(draggableAncestor);
+    };
+    const getDragStartEventData = (element) => {
+        const value = config.onGetValue(index);
+        return ({ index, element, value });
+    };
+    const startTouchMoveEvent = (event) => {
+        droppableConfigurator.updateConfig(event);
+        toggleDroppableClass(droppableConfigurator.isOutside(event));
+        startDragging(event);
+    };
+    const onmousedown = (moveEvent, onLeaveEvent) => {
+        return (event) => {
+            if (!cursorIsOnChildDraggable(event, draggableElement)) {
+                return;
+            }
+            ConfigHandler.updateScrolls(parent, droppableGroupClass);
+            const { scrollX, scrollY } = window;
+            windowScroll = { scrollX, scrollY };
+            if (draggingState === DraggingState.NOT_DRAGGING) {
+                draggingState = DraggingState.START_DRAGGING;
+                const data = getDragStartEventData(draggableElement);
+                data && onDragStart(data);
+                addTouchDeviceDelay(moveEvent, () => {
+                    if (moveEvent == 'touchmove') {
+                        startTouchMoveEvent(event);
+                    }
+                });
+                document.addEventListener(moveEvent, handleMove, {
+                    passive: false,
+                });
+                makeScrollEventOnDroppable(parent);
+                document.addEventListener(onLeaveEvent, onLeave(moveEvent), {
+                    once: true,
+                });
+            }
+        };
+    };
+    const mousedownOnDraggablefunction = (event) => {
+        return droppableConfigurator.updateConfig(event);
+    };
+    const onLeave = (moveEvent) => {
+        return (event) => {
+            disableDragging(moveEvent, event);
+        };
+    };
+    const disableDragging = (moveEvent, event) => {
+        toggleDroppableClass(true);
+        const convertedEvent = convetEventToDragMouseTouchEvent(event);
+        onDropDraggingEvent(droppableConfigurator.isOutside(convertedEvent, false));
+        clearTimeout(delayTimeout);
+        document.removeEventListener(moveEvent, handleMove);
+        droppableConfigurator.updateConfig(convertedEvent);
+        const currentConfig = droppableConfigurator.getCurrentConfig(convertedEvent);
+        if (currentConfig) {
+            const { droppable } = currentConfig;
+            removeOnScrollEvents(droppable);
+        }
+        parent.onscroll = null;
+        endDraggingState();
+    };
+    const removeOnScrollEvents = (droppable) => {
+        droppable.onscroll = null;
+        if (!droppableGroupClass) {
+            return;
+        }
+        const droppables = Array.from(document.querySelectorAll(getClassesSelector(droppableGroupClass)));
+        for (const droppable of droppables) {
+            if (IsHTMLElement(droppable)) {
+                droppable.onscroll = null;
+            }
+        }
+    };
+    const startDragging = (event) => {
+        addTempChild(draggableElement, parent, draggingState == DraggingState.START_DRAGGING, droppableConfigurator.current);
+        updateDraggingStateBeforeDragging();
+        emitEventToSiblings(draggableElement, START_DRAG_EVENT, windowScroll, droppableConfigurator.current);
+        setDraggingStyles(draggableElement);
+        updateTransformState(event, draggableElement);
+    };
+    const updateDraggingStateBeforeDragging = () => {
+        draggingState = DraggingState.DRAGING;
+    };
+    const setTransformEvent = (event) => {
+        const { pageX, pageY } = event;
+        pagePosition = { pageX, pageY };
+        setTransformDragEvent();
+    };
+    const makeScrollEventOnDroppable = (droppable) => {
+        return setEventWithInterval(droppable, "onscroll", onScrollEvent);
+    };
+    const onScrollEvent = () => {
+        return setTransformDragEvent();
+    };
+    const onDropDraggingEvent = (isOutsideAllDroppables) => {
+        if (draggingState !== DraggingState.DRAGING && draggingState !== DraggingState.START_DRAGGING) {
+            endDraggingState();
+            return;
+        }
+        draggingState = DraggingState.END_DRAGGING;
+        removeDraggingStyles(draggableElement);
+        if (draggableElement.classList.contains(DRAGGING_CLASS)) {
+            emitEventToSiblings(draggableElement, START_DROP_EVENT, windowScroll, isOutsideAllDroppables ?
+                droppableConfigurator.initial :
+                droppableConfigurator.current, index);
+        }
+    };
+    const removeDraggingStyles = (element) => {
+        setTranistion(element, animationDuration, draggableTargetTimingFunction);
+        moveTranslate(element, 0, 0);
+    };
+    const setDraggingStyles = (element) => {
+        const { height, width } = element.getBoundingClientRect();
+        setCustomFixedSize(element, {
+            fixedHeight: `${height}px`,
+            fixedWidth: `${width}px`
+        });
+        toggleDraggingClass(element, true);
+        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);
+        }
+    };
+    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);
+            });
+        }
+    };
+    setCssStyles();
+    setSlotRefElementParams(draggableElement);
+    return [removeAtFromElement, insertAtFromElement];
+}

package/dist/core/useDroppable.d.ts

@@ -1,4 +1,3 @@
-import { CoreConfig } from '.';
-import { default as 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

@@ -0,0 +1,55 @@
+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);
+    }
+};
+const createDraggableCssStyles = () => {
+    AddCssStylesToElement(document.body, [
+        `.${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;}",
+        `.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;}`,
+    ]);
+};
+export default function useDroppable(coreConfig, handlerPublisher, droppable, indexAttr = 'index') {
+    const INDEX_ATTR = indexAttr;
+    let removeAtFromElementList = [];
+    let insertAtFromElementList = [];
+    const { droppableGroup } = coreConfig;
+    if (!droppable) {
+        return [
+            removeAtFromElementList,
+            insertAtFromElementList
+        ];
+    }
+    const droppableGroupClass = getClassesList(droppableGroup)
+        .map((classGroup) => `droppable-group-${classGroup}`)
+        .join(" ");
+    createDraggableCssStyles();
+    setDroppableGroupClass(droppableGroupClass, droppable);
+    for (const child of droppable.children) {
+        const index = child.getAttribute(INDEX_ATTR);
+        const numberIndex = parseIntEmpty(index);
+        const childHTMLElement = child;
+        if (childHTMLElement && numberIndex >= 0) {
+            const [removeAtFromElement, insertAtFromElement] = useDraggable(childHTMLElement, numberIndex, coreConfig, droppable, handlerPublisher);
+            removeAtFromElementList.push(removeAtFromElement);
+            insertAtFromElementList.push(insertAtFromElement);
+        }
+    }
+    return [
+        removeAtFromElementList,
+        insertAtFromElementList
+    ];
+}

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

@@ -1,6 +1,5 @@
-import { Direction } from '..';
-import { BeforeMargin, AfterMargin, BorderWidth, PaddingBefore, Before } from '../../../index';
-
+import { Direction } from "..";
+import { BeforeMargin, AfterMargin, BorderWidth, PaddingBefore, Before } from "../../../index";
 export declare const getWindowScroll: () => {
     scrollX: number;
     scrollY: number;