DragOverlay returns to original position
See original GitHub issueHello, I’m not sure if Stack Overflow is a better palce for this, as I’m sure it’s user error, but my overlay seems to return to its start position after releasing the dragged item. The array is properly mutated, but the visual effects make it look like it isn’t.
Issue
When I use a drag overlay, the overlay returns to its start position after releasing the click.
Env
Happy to share more specific code on request, but here’s what I think is immediately relevant:
- I am only using a mouse sensor
- My render logic is completely decoupled from dnd-kit
- DragOverlay is not conditionally rendered, just the inside content is
- If I do not use a DragOverlay, the behavior works as expected, the dragged item drops right where it should ( but of course scrolling doesn’t work w/o
position: absolute
) - The list is virtualized, but the same issue was happening w/o it
Relevant Setup
<DndContext
sensors={sensors}
collisionDetection={closestCenter}
onDragStart={handleDragStart}
onDragEnd={handleDragEnd}
>
<SortableContext items={memoizedItems} strategy={verticalListSortingStrategy}>
<Virtuoso
style={{ height: '83vh' }}
ref={virtuosoRef}
data={items}
itemContent={(index, item) => {
return <SortableItem activeDragId={activeDragId} key={item.id} {...item} render={render} index={index} />
}}
/>
</SortableContext>
<DragOverlay>{activeDragId ? render(activeDragItem, 0) : null}</DragOverlay>
</DndContext>
Video
Issue Analytics
- State:
- Created a year ago
- Comments:6 (3 by maintainers)
Top Results From Across the Web
Drag Overlay - dnd-kit – Documentation
The <DragOverlay> component provides a way to render a draggable overlay that ... unmount from its original container while dragging and mount back...
Read more >draggable - return to original position - GSAP - GreenSock
I am new to Greensock. I am using draggable to drag items around the screen im using hit test to determine if the...
Read more >React beautiful DnD drag out of position problem
Basically when the library is using position: fixed as OP mentioned, there are are ... If no type is provided, it will be...
Read more ><DragOverlay> component • clauderic/dnd-kit - Chromatic
Press space again to drop the item in its new position, or press escape to cancel.
Read more >web.mit.edu/Emacs/source/emacs/lisp/mouse.el
With the default setting, an ordinary Mouse-1 click on a link performs the same ... position (indirect-function map)))) ;; Strangely x-popup-menu returns a ......
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
@christopher-caldwell in your particular case, the issue is resolved by bumping
@dnd-kit
to the latest versions:https://christopher-caldwell-dnd-drag-overlay-repro-4g5rpg92j9wj-3000.githubpreview.dev/dnd-drag-overlay-repro/
@elvisduru feel free to re-open a new issue with a replication case if you want me to assist you.
@elvisduru please provide a replication case. Having the same symptom does not mean it is the same root cause.