react-dnd / react-dnd

Drag and Drop for React

Home Page:http://react-dnd.github.io/react-dnd

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Drop dragged item if it intersects more than 50% of the drop area

andrikalin opened this issue · comments

Hello there and thanks for your library!
I have a question about the basic usage of the drag & drop feature.
In our project, we have a dragging item:

const [{ isDragging }, drag] = useDrag({
	type: 'block',
	item: { id, name, answers, order, parents, description, secondsFalling, accuracyCoefficient },
	collect: (monitor) => ({
	  isDragging: monitor.isDragging(),
	})
});

and drop area where this item can be dropped:

const [, drop] = useDrop({
    accept: 'block',
    drop: handleDrop,
});

The issue I've noticed: the item can be dropped into the drop area only when the cursor is above the drop area. So there are situations when the dragged item is 90% over the drop area, but it can't be dropped because the cursor (the place, where we grabbed the item) isn't over the drop area yet. Check the screenshot for the case demo: https://prnt.sc/KqAukNobfJm9.

Is there an option to trigger drop somehow if the dragged item intersects over 50% of its own width into the drop area, or smth like this?

Thanks in advance!

@andrikalin Did you find any workaround for this issue?