@hydroperx/drag4react/dist/index.js

React drag-n-drop

import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
import { useEffect, useRef } from "react";
import BaseDraggable from "@hydroperx/draggable";
export default function Draggable(options) {
    let { dragStart: drag_start, dragMove: drag_move, dragStop: drag_stop, limitRef: limit_ref, nodeRef: el_ref, children, disabled, } = options;
    const draggable = useRef(null);
    function create_draggable() {
        draggable.current = new BaseDraggable(el_ref.current, {
            limit: limit_ref.current ?? undefined,
            onDragStart(element, x, y, event) {
                drag_start?.({ element: element, x, y });
            },
            onDrag(element, x, y, event) {
                drag_move?.({ element: element, x, y });
            },
            onDragEnd(element, x, y, event) {
                drag_stop?.({ element: element, x, y });
            },
        });
    }
    useEffect(() => {
        if (draggable.current)
            draggable.current.destroy(),
                draggable.current = null;
        if (!disabled)
            create_draggable();
        // Cleanup
        return () => {
            if (draggable.current)
                draggable.current.destroy(), draggable.current = null;
        };
    }, [disabled]);
    useEffect(() => {
        // Cleanup
        return () => {
            if (draggable.current)
                draggable.current.destroy(), draggable.current = null;
        };
    }, []);
    return _jsx(_Fragment, { children: children });
}