Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

DragOverlay returns to original position

See original GitHub issue

Hello, 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

https://user-images.githubusercontent.com/62559469/168937718-730d4a10-f805-4e26-b1ad-a86914fdda4d.mov

Issue Analytics

State:
Created a year ago
Comments:6 (3 by maintainers)

Top GitHub Comments

1reaction

claudericcommented, May 28, 2022

@christopher-caldwell in your particular case, the issue is resolved by bumping @dnd-kit to the latest versions:

"@dnd-kit/core": "^6.0.2",
"@dnd-kit/sortable": "^7.0.0",

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.

0reactions

claudericcommented, May 28, 2022

@elvisduru please provide a replication case. Having the same symptom does not mean it is the same root cause.

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...

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...

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...

<DragOverlay> component • clauderic/dnd-kit - Chromatic

Press space again to drop the item in its new position, or press escape to cancel.

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 ......