search

atlassian / react-beautiful-dnd

Beautiful and accessible drag and drop for lists with React
https://react-beautiful-dnd.netlify.app
Other
32.94k stars 2.52k forks source link

isDraggingOver in multiple droppables list missing its target #1734

Open AlithAnar opened 4 years ago

AlithAnar commented 4 years ago

Expected behavior

Dragging draggable item over droppable item should set isDraggingOver in correct position

Actual behavior

isDraggingOver is set to true in wrong droppable item (I'm not hovering this item)

Steps to reproduce

Suggested solution?

What version of React are you using?

16.12.0

What version of react-beautiful-[dnd are you running?

12.2.0

What browser are you using?

79.0.3945.130

Demo

sample

What I want to achieve is to move a Task item from the board to other Board (Droppable). As you can see, Droppable with isDraggingOver set to true is marked with red background. It is not similar as css hovering.

jaismith commented 4 years ago

bumping this, have similar issue in my own project. any known fixes/causes?

AlithAnar commented 4 years ago

my suspicion is that when dragged item is higher than droppable container (which we don't want to expand) it breaks. If I set my container (droppable) to be higher than dragged item, its working well

sample

AlithAnar commented 4 years ago

Might be wrong. Moved groups to the bottom of Draggables and it stopped working correctly.

ryantando commented 3 years ago

Might be wrong. Moved groups to the bottom of Draggables and it stopped working correctly.

Did you manage to solve this issue?

olegcherr commented 3 years ago

Same problem! 20201009-004251

Source code: https://codesandbox.io/s/rbd-drag-over-position-bug-demo-oqzsx

olegcherr commented 3 years ago

I guess that the problem is how react-beautiful-dnd calculating the overlapping between Draggable and Droppable. react-beautiful-dnd starts to overlap them too early (when they are too far): 20201009-005814

So if there are several Droppables laying next to each other, then they sensible areas just overlap each other: 20201009-004251

igor-sysoev commented 3 years ago

I guess that the problem is how react-beautiful-dnd calculating the overlapping between Draggable and Droppable. react-beautiful-dnd starts to overlap them too early (when they are too far): 20201009-005814

So if there are several Droppables laying next to each other, then they sensible areas just overlap each other: 20201009-004251

Currently dealing with the same issue. Did you manage to find a fix? If you increase the distance enough it sorta works, but it's really not what I'm looking for.

olegcherr commented 3 years ago

Did you manage to find a fix? Not yet ((

Just faced this problem again and have to figure out how to workaround it... again...

coulson84 commented 3 years ago

I have come up against this problem myself and think it might be worth having an alternative method for calculating the drop target of a dragged element.

Our use case is that we have a list of items that can be dragged on to a grid of Droppable target days on a calendar. The items are large and the calendar days are necessarily quite small. The current way that the drop target is being calculated gives a really poor UX and it can be difficult to even get it to have some days selected before dropping the item. In some instances I think it would provide a much better experience to just the pointer location as the point of reference for calculating the target droppable item. Obviously this could break lots of things but if it was opt in via a dropTargetType or something on a draggable then it should work. Default value (for current behaviour) would be 'box' and other option would be 'pointer'. Just an idea. I am going to fork the repo anyway as we need this adding to our project so if it goes well I'll submit a PR for this.

olegcherr commented 3 years ago

much better experience to just the pointer location as the point of reference for calculating the target droppable item

@coulson84 Great idea! That would be really awesome. Can't wait for your PR :))

coulson84 commented 3 years ago

Okay - I have put a quick mashup together for this if anyone on this thread has time to try it out https://github.com/coulson84/react-beautiful-dnd

It currently forces the new behaviour just whilst I was testing it worked as expected. Will add in code to make it optional and add a PR soon.

Edit: Have added the prop for this so if you want to use the cursor position to calculate the drop target you must set dropTargetCalculationMode="pointer" on the <Draggable> it's not the shortest or catchiest of prop names so I am open to suggestions 😄

jasonleenaylor commented 2 years ago

Our project is facing the same bug and are currently evaluating our options. We would love to continue using react-beautiful-dnd and were considering working on a similar change to what @coulson84 has put together. @alexreardon when might this issue get triaged? Oh, is this repository still active? I just noticed that there are no commits since August 30.

coulson84 commented 2 years ago

So there are not going to be any PRs merged or issues addressed u til further notice in this repo which is a shame. @jasonleenaylor if you haven't done the work already I would recommend checking out my branch and trying it. We have been using it in production for a while (via yarn patch) and it has been working really well.