const [dropProps, drop] = useDrop< DragItem, void, { handlerId: Identifier | null } >( () => ({ accept: DRAG_ITEM_TYPE.reorderableListItem, collect(monitor) { return { handlerId: monitor.getHandlerId(), item: monitor.getItem(), } }, hover: (item: DragItem, monitor) => { if (!itemRef.current) { return } const dragIndex = item.index const hoverIndex = index // Don't replace items with themselves if (dragIndex === hoverIndex) { return } // Determine rectangle on screen const hoverBoundingRect = itemRef.current?.getBoundingClientRect() // Get vertical middle const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2 // Determine mouse position const clientOffset = monitor.getClientOffset() // Get pixels to the top const hoverClientY = (clientOffset as any).y - hoverBoundingRect.top console.log('hoverClientY',hoverClientY) // Only perform the move when the mouse has crossed half of the items height // When dragging downwards, only move when the cursor is below 50% // When dragging upwards, only move when the cursor is above 50% // Dragging downwards if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) { return } // Dragging upwards if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) { return } // Time to actually perform the action handleMove(item, hoverIndex) scroll(hoverClientY) // // Note: we're mutating the monitor item here! // // Generally it's better to avoid mutations, // // but it's good here for the sake of performance // // to avoid expensive index searches. item.index = hoverIndex }, }), [handleMove, index, id, scroll], )

 const scroll = useCallback((lastMouseClientY: number) => { if (listRef.current) { const position = listRef.current?.getBoundingClientRect() const { top, bottom } = position const scrollSpeed = 5 const margin = lastMouseClientY if (lastMouseClientY > bottom - margin) { console.log('down') const nextScrollTop = listRef.current.scrollTop + scrollSpeed listRef.current.scrollTo(0, nextScrollTop) } else if (lastMouseClientY < top + margin) { console.log('up') const nextScrollTop = listRef.current.scrollTop - scrollSpeed listRef.current.scrollTo(0, nextScrollTop) } } }, [])

Quiero activar el desplazamiento cuando paso el hover sobre el contenedor, pero el método de desplazamiento de useDrop solo funciona mientras se desplaza sobre otro elemento. Entonces, por ejemplo, si muevo el elemento hacia abajo con arrastrar (lo que satisfará mi condición de coordenadas), moverá el elemento en la lista y ahora, en lugar de desplazarse hacia abajo, se desplazará sobre sí mismo (no sobre otro elemento) y hover no se activará (sin desplazamiento) ¿Podría ayudarme?