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);
}
};
не получилось