search

minop1205 / react-dnd-treeview

A draggable / droppable React-based treeview component. You can use render props to create each node freely.
MIT License
520 stars 69 forks source link

Drop is canceled even though placeholder is visible #100

Closed minop1205 closed 4 months ago

minop1205 commented 2 years ago

From PR below https://github.com/minop1205/react-dnd-treeview/pull/99#issue-1110578682

When Tree component is used to manual sort items, the user might drag items outside of the droppable area -- especially when trying to move it to the top or the bottom of the list. If we restrict the drop to only the tree area, we might have some weird behaviors, like rendering the placeholder somewhere, but not accepting a drop when the user releases the mouse button for example.

The default is still only allowing drop inside the tree area, but by setting cancelOnDropOutside as false we allow drops outside of the tree whenever there's a placeholder being rendered.

This is an example of the original issue:

https://user-images.githubusercontent.com/836386/150551213-773a2696-ac69-47b9-abdd-c17523f4936f.mov

minop1205 commented 2 years ago

The end option of useDrag hook is called by dropping outside the dropable area or by canceling with the ESC key, so it is necessary to distinguish between these two.

If the drop is outside the dropable area, it should be dropped at the placeholder position, and if the ESC key is pressed, the drop should be canceled.

mattevans-dev commented 1 year ago

Hi @minop1205 , I'm currently having this exact issue. I'm trying to drop an item with a placeholder at the top or bottom (outside of the normal droppable area) but onDrop doesn't get called. Did you manage to find a solution for this or a potential work around?

uffou commented 10 months ago

Having this exact issue. Does anyone has a fix or a workaround?

minop1205 commented 4 months ago

We have addressed this issue by not displaying placeholders when dragging over outside the dropable area.