ahooks/es/useDrag/index.js

react hooks library

import { useRef } from 'react';
import useLatest from '../useLatest';
import useMount from '../useMount';
import { isString } from '../utils';
import { getTargetElement } from '../utils/domTarget';
import useEffectWithTarget from '../utils/useEffectWithTarget';
const useDrag = (data, target, options = {}) => {
    const optionsRef = useLatest(options);
    const dataRef = useLatest(data);
    const imageElementRef = useRef(undefined);
    const { dragImage } = optionsRef.current;
    useMount(() => {
        if (dragImage === null || dragImage === void 0 ? void 0 : dragImage.image) {
            const { image } = dragImage;
            if (isString(image)) {
                const imageElement = new Image();
                imageElement.src = image;
                imageElementRef.current = imageElement;
            }
            else {
                imageElementRef.current = image;
            }
        }
    });
    useEffectWithTarget(() => {
        const targetElement = getTargetElement(target);
        if (!(targetElement === null || targetElement === void 0 ? void 0 : targetElement.addEventListener)) {
            return;
        }
        const onDragStart = (event) => {
            var _a, _b;
            (_b = (_a = optionsRef.current).onDragStart) === null || _b === void 0 ? void 0 : _b.call(_a, event);
            event.dataTransfer.setData('custom', JSON.stringify(dataRef.current));
            if ((dragImage === null || dragImage === void 0 ? void 0 : dragImage.image) && imageElementRef.current) {
                const { offsetX = 0, offsetY = 0 } = dragImage;
                event.dataTransfer.setDragImage(imageElementRef.current, offsetX, offsetY);
            }
        };
        const onDragEnd = (event) => {
            var _a, _b;
            (_b = (_a = optionsRef.current).onDragEnd) === null || _b === void 0 ? void 0 : _b.call(_a, event);
        };
        targetElement.setAttribute('draggable', 'true');
        targetElement.addEventListener('dragstart', onDragStart);
        targetElement.addEventListener('dragend', onDragEnd);
        return () => {
            targetElement.removeEventListener('dragstart', onDragStart);
            targetElement.removeEventListener('dragend', onDragEnd);
        };
    }, [], target);
};
export default useDrag;