Sticky drag

[iamkeiryan]

Hi,

I'm trying to use the Reorder and while testing, I encountered an issue where sometimes it gets stuck to the last item I dragged.

Whenever I drag a certain item (let's say the first one) and tried to drag another, it sometimes gets stuck to the first item. Instead of another item gets dragged on, the last item that I dragged is the one who is being dragged.
I've tried the most basic code update but it's still happening.

Here's the code preview.

export const Items = ({ prop }: { prop: PropertyStack }) => {
  const [items, setItems] = useState(['1', '2', '3']);
  const dragControls = useDragControls();
  return (
    <div className="rounded border p-2 space-y-2">
      <Reorder.Group values={items} onReorder={setItems}>
        {items.map(l =>
          <Reorder.Item key={l} value={l} dragListener={false} dragControls={dragControls}>
            <div className="select-none flex flex-row justify-between items-center border rounded h-10 px-2">
              <div
                className="cursor-grab active:cursor-grabbing border"
                onPointerDown={(e) => dragControls.start(e)}
                onMouseDown={(e) => e.stopPropagation()}
                onTouchStart={(e) => e.stopPropagation()}
              >
                <GripVertical size={16} />
              </div>
              <p className="text-xs">Layer Type {l}</p>
              <img className="size-5 rounded-full" />
            </div>
          </Reorder.Item>)
        }
      </Reorder.Group>
    </div>

  )
};