how to prevent snap-back animation when dragging an item and dropping it outside to remove it ?

[dd-ssc]

I find it absurdly hard to get started with pragmatic drag and drop and super frustrating to get anywhere with it 😞

I have spent the last 2 weeks reading most of the documentation and working through the tutorial and some of the examples - but they are bloated with code that has nothing to do with prag dnd, but only distracts and raises more questions - and I still feel like a complete idiot 🤯

Still, I managed to implement some of the drag & drop use cases in my application:
I have items (i.e. React components with draggable) and drop zones (i.e. React components with dropTargetForElements).

1. I can drag items in from "outside" (i.e. from React components not connected with prag dnd in any way) and drop them in a drop zone
2. I can drag and drop items between drop zones
3. I can drag items from a drop zone and drop it "outside" (see point 1) to remove them

However, when I do point 3, I see some animation that moves the item back to the location it was dragged from before it disappears.

I've been trying to fix this using Copilot, but that just misses the point; it screws around hiding the item while it is being dragged (or removing it from the DOM), but none of that seems to change anything about that snap-back animation.

How can I fix that ?

[CreatesRahul-Lab]

Hey, totally feel you on this — I’ve also found the learning curve with @pragmatic-drag-and-drop to be steeper than expected.

About the snap-back animation when dragging an item out and dropping it "outside" — this usually happens when the library doesn't register the drop as "successful." So even if you're removing the item from state, Prag DnD thinks the drop failed and animates it back to its origin.

What worked for me is treating the "outside" as an actual drop zone — even if it’s invisible. You can use dropTargetForElements on an element (like a trash area or empty space) and handle the onDrop() there to remove the item.

[dd-ssc]

Thanks for your response! 👍

treating the "outside" as an actual drop zone

Yeah, that's a thought I've entertained, as well - but that's simply not possible: I'd have to duplicate the dropTargetForElements code to every component the user might drop items on, i.e. every component that's visible: App header, footer, sidebars, empty areas with unclear and changing component stacks in the z-axis, etc. pp. - none of which have anything to do with drag and drop as such 😞

I am handling drag & drop in a React component that's a (grand grand etc.) parent to both items and drop zones in what I thought is the intended way:

const MyComponent = () => {
   ...
  useEffect(() => {
    return monitorForElements({
      onDragStart: ({ location, source }: ... ): void => {
        console.debug('MyComponent > onDragStart > location:', location);
        console.debug('MyComponent > onDragStart > source:  ', source);
         ...
      },
      onDrop:      ({ location, source }: ... ): void => {
        console.debug('MyComponent > onDrop > location:', location);
        console.debug('MyComponent > onDrop > source:  ', source);
         ...
      }
    }
  })
   ...
}

I was under the impression monitorForElements exists so any drag & drop activity can be detected conveniently in a parent component and be processed there, but that seems to work only for the first half: MyComponent > onDragStart is called no matter where I start dragging an item from, but MyComponent > onDrop only gets called when I drop the item on the drop zone eqipped with dropTargetForElements, not when I drop it anywhere else.

Well, seems like even after investing all this time trying to learn prag dnd, I still lack any deeper understanding, so I have no idea if that's a prag dnd shortcoming or if it's me who's doing something wrong 🤷🏻‍♂️

I don't think I can go live with that visual bug, so unless I find some other solution, pragmatic drag and drop is a brick wall for my project 😞.

[CreatesRahul-Lab]

Thanks for the response — really appreciate it!

Yeah, I had a feeling the snap-back was happening because the library treats the drop as “unsuccessful” if it doesn’t land on a registered drop zone. The suggestion to use an invisible drop target for the “outside” makes sense technically… but in my case, it’s just not practical. I’d have to wrap or duplicate that logic across tons of random UI areas — headers, footers, modals, sidebars, etc. — and it quickly becomes a mess

I was kind of hoping that monitorForElements would be enough to detect and handle drops anywhere, especially since it picks up onDragStart perfectly. But unfortunately, it seems onDrop only fires if the drop lands on a valid dropTargetForElements, which kind of defeats the flexibility I was going for.

At this point, I’m honestly a bit stuck. I might try hacking in a fullscreen invisible drop zone just to make it work, but if that gets too fragile, I’ll probably start looking into alternatives like dnd-kit, which seems more flexible for this kind of use case.

Again, thanks for helping me understand what’s really going on here — even if the answer isn’t ideal, it’s good to finally have clarity!!

[dd-ssc]

I just looked through all the shiny pragmatic drag and drop examples once more: Not one of them supports removing items. Could probably be added to the item context menu as an alternate approach, but the most natural, intuitive way to remove an item - drag it outside and drop it there - simply doesn't seem to be supported.

[dd-ssc]

In a last attempt, tried GitHub Copilot once more:

Sounds too good to be true ? Well, that's because it is: In the absence of a solution, Copilot / ChatGPT make one up, they hallucinate - there is no onDropEnd:

Yeah...

Not going to start listening for native events - hallucinated or real: Not having to deal with the browser intricacies that come with that is one of the main reasons for using prag dnd in the first place.

Also, I tried adding something like a transparent full-page drop target - but that can not be behind your UI as suggested (probably another AI brain fart) where dnd events wouldn't even reach it, but must be the top ui element. In my case, that seemed to interfere quickly with other ui features.

No dice 😞

[dd-ssc]

I’ll probably start looking into alternatives like dnd-kit

Been there, done that - in fact, this is not the first time Atlassian dnd packages cause a grinding halt to my projects:

Tried react-beautiful-dnd, but that never worked for anything but a few selected use cases - and it especially didn't support dragging from a tree; the fact that Atlassian chose to silently kill the @atlaskit/tree package that my app depended on probably didn't help: atlassian/react-beautiful-dnd#1277 (comment). They never bothered to even comment on that: atlassian/react-beautiful-dnd#1547

By the looks of it, it seems I also tried react-dnd at some stage with a MUI TreeView: https://stackoverflow.com/q/73040993. The app roughly still looks the same today.

With that in mind, there is actually progress: Drag & drop in a drag & drop package now actually works.