Ad

React-beautiful-dnd Inconsistent Drop Zone Width

- 1 answer

In this example I forked official example from git. I only changed drop zone with to 500px.

The problem is if I grab the beginning of the box, then only a bit more than half of the drop zone is active. enter image description here

Same thing happens if I grab the end of the box, then the half left side is inactive. enter image description here

But if I grab the middle of the box, the whole box seems to be active.

Is this a bug? Or I missing something from configuration? Maybe CSS?

Ad

Answer

When dragging with a mouse the impact of an item is based on it's center position. So the center position of an item needs to be over the list for it to be the drop target

Ad
source: stackoverflow.com
Ad