DragDrop элементов списка на touch устройствах

Надо сделать tabs menu с возможностью перетаскивания элементов. Делаю через библиотеку "framer-motion" компонент Reorder.

            <Reorder.Group
                ref={containerRef}
                axis="x"
                values={scrollableTabs}
                onReorder={updateTabs => setTabs([...pinnedTabs, ...updateTabs])}
                className="flex items-center gap-4 overflow-x-auto overflow-y-hidden customScrollExonTabs"
            >
                {scrollableTabs.map((tab: ITab): JSX.Element => (
                    <ExonTabsItemMove key={tab.id} tab={tab} removeTabItem={removeTabItem}
                        ref={el => el && tabsRef.current.set(tab.id.toString(), el)}
                    />
                ))}
            </Reorder.Group>




export const ExonTabsItemMove = forwardRef<HTMLLIElement, IExonTabsItemMoveProps>(({
    tab,
    removeTabItem,
}, ref): JSX.Element => {
    const x = useMotionValue(0);
    const boxShadow = useRaisedShadow(x);

    const [dragging, setDragging] = useState<boolean>(false);

    const handleDragStart = (): void => setDragging(true);
    const handleDragEnd = (): void => setDragging(false);

    return (
        <Reorder.Item
            value={tab}
            id={tab.id.toString()}
            style={{ boxShadow, x }}
            className="shrink-0 relative"
            onDragStart={handleDragStart}
            onDragEnd={handleDragEnd}
        >
            <ExonTabsItem tab={tab}/>
        </Reorder.Item >
    );
});

условие

На мобильных устройствах перетаскивание табов должно быть возможно спустя 2 секунды как был зажат таб. Это нужно для того чтобы перетаскивание не конфликтовало с скроллингом.

как мне это сделать?

пробывал делать вот так

const handleTouchStart = () => {
    if (isMedia1024) {
        timerRef.current = setTimeout(() => {
            setDragging(true);
        }, 1000);
    }
};

const handleTouchMove = () => {
    if (isMedia1024) {
        setDragging(true);
    }
};

const handleTouchEnd = () => {
    if (isMedia1024) {
        clearTimeout(timerRef.current);
        setDragging(false);
    }
};

не получилось


Ответы (0 шт):