Wide Draggable cannot be dropped on another list

[artooras]

Bug or feature request?

Perhaps both

Expected behavior

I would expect the Draggable to be recognized by a Droppable when the part by which it is dragged enters the Droppable.

Actual behavior

I understand that the current implementation expects the middle point of the Draggable to enter the Droppable for the drop to become available. In most cases this is OK. However, if, say, there are 2 lists, and one of them contains very wide Draggables, it's nearly impossible to drop those Draggables onto another Droppable.

I say nearly impossible because it is possible if I drag outside of container bounds. However, this is not always possible, say, when this would require to drag outside of screen bounds.

Steps to reproduce

In the demo, try dragging an item from the left-hand list onto the right-hand one - it works. Now, try to drag in the opposite direction - it doesn't, because the center point of the item never reaches the boundaries of the left-hand list.

What version of React are you using?

16.6.3

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

10.0.2

What browser are you using?

Firefox 63.0.3 Mac

Demo

https://codesandbox.io/s/4zmvl6k4q4

[gihrig]

I have this problem in a complex DnD layout, something like a file manager, think Mac Finder or Windows Explorer. A solution to #981 (resize on drag) would fix this issue, also making the mouse drag point be the 'center of gravity' would fix it.

I understand the point about making RBDnD model the physical world, but in my experience that idea does not fit the screen world and servers no real purpose.

I realize that I could use another DnD library that works more the way I want, but I have looked at several and RBDnD is far and away superior to the others. Having this ability would make it just about perfect!

[artooras]

Yes, looking again at the documentation, it seems that my request has faced the roadblock of Application 2: knowing when to move. However, at this point, I would like to question the correctness of this principle.

For instance, it certainly makes sense to do so when dragging from one list to another from left to right in the case of having a drag handle on the left - see my example. However, when dragging from right to left, it makes the setup in my example rather unusable.

Another example where judging the entry to a Droppable by the centre point of a Draggable can be detrimental is if I'm trying to drop it on a Droppable that is covered fully by the Draggable - see this example (drag an item from the right-hand side list to the middle column that has no items yet). By the time the Draggable enters the Droppable, the latter is obscured by the Draggable and I cannot see the visual cues - the change of colour - indicating to me that I can drop an item there. This would not be the case if the entry point was calculated by the edge (the drag handle) where I'm holding the Draggable.

Yes, I know, in theory, the {provided.placeholder} could solve this by increasing the height of the Droppable. However, this is not always feasible. For instance, I am using this library to drag items onto a calendar, where time slots on the calendar are all empty Droppables. They can be rather small - 30 minute and 15 minutes slots. And, as you can imagine, increasing their size is not really an option...

So, to wrap up, react-beautiful-dnd is an excellent library and exceeded my expectations and allowed me to implement the functionality I have struggled to do with other popular dnd libraries - dragging between lists, dragging and dropping items onto items in another list (e.g. tasks onto projects, and vice versa) and dragging items into calendar slots. However, this minor (?) issue is breaking the case for using the library.

I would imagine there could be a prop on Draggable, perhaps something like enterDroppableOnGrabPoint or something similar, that would trigger the calculation of the entry point based on the grab point. Or, if the latter is difficult to implement, at least enterDroppableOnDragHandle that has a fixed position in a Draggable.

I've never done a PR, but - if this project even accepts PRs - I'd be happy to give it a go with some help and pointers on where to start.

[jacobwicks]

I ran into this problem as well. I'm using semantic-ui-react. When I realized that the reason the draggables couldn't be dropped was the calculation based on their width, I tried many things to adjust the draggable width down so that the midpoint could cross the droppable on the screen. Applying styles, etc was unsuccessful. My current solution is to put the droppable into a grid column with a width of '1'. The draggables will still render at the width dictated by the draggable component, in this case the text in the label object, but the width used for calculating whether the midpoint is over the droppable (which is taken from the Grid.Column width) is small enough that you can target e.g. a droppable near the edge of the screen. This does lead to weird looking problems with wider draggables & other edge cases, but mostly works well enough that I have not had to drop rdndb.

<Grid> <Grid.Column width={1}> <Droppable droppableId={droppableId} type={contentType} > {(provided, snapshot) => ( <div ref={provided.innerRef}> {items.map((item, index) => <DraggableItem key={droppableId + item + index.toString()} color={color} index={index} item={item} /> )} {provided.placeholder} </div> )} </Droppable> </Grid.Column> </Grid>

[alexreardon]

Related: #930

[alexreardon]

We will track this here: #930