Add onBeforeCapture Responder

[alexreardon]

A new responder that would be called just before any dimensions are captured.

This has been resisted previously due to potential timing issues. However, due to recent changes it should be safer.

onBeforeCapture would allow people to change things just before a drag is about to start. This is generally not a good idea as it is a footgun:

• it is easy to break the physicality that we are trying to achieve
• if you remove things before a draggable in the document flow then the users cursor will no longer be over the draggable
• lots more

All that said, a number of scenarios have come up where it would be useful to:

• Add a Droppable area just before a drag starts
• Slightly modify the dimensions of some elements

I thought about potentially adding a getDimension callback to Draggables and Droppables so that they can tell the system whatever dimension they want. However, this has some strangeness to it too:

• A collected Draggable dimension will be applied to the dragging element. So if it is different would get some visual strangeness
• The onBeforeCapture makes it easier to align what is visible to what is captured

[alexreardon]

This shipped in https://github.com/atlassian/react-beautiful-dnd/releases/tag/v12.1.0

[ZYinMD]

Hi @alexreardon ,

if you remove things before a draggable in the document flow then the users cursor will no longer be over the draggable

I experienced exact this, so is there any way to make the draggable stay with the cursor? I know the v12.0.0 release note clearly says "dynamic removal" isn't supported, but I just want to confirm, because I don't need "dynamic removal" per se, all I need is to remove some draggables before the drag, not during the drag, is that impossible as well?

I'm still using 11.x and it works well, but I'm hoping to move to v12 to benefit from the new collision engine.

Thanks!

[sayanything830]

Hi @alexreardon ,

if you remove things before a draggable in the document flow then the users cursor will no longer be over the draggable

I experienced exact this, so is there any way to make the draggable stay with the cursor? I know the v12.0.0 release note clearly says "dynamic removal" isn't supported, but I just want to confirm, because I don't need "dynamic removal" per se, all I need is to remove some draggables before the drag, not during the drag, is that impossible as well?

I'm still using 11.x and it works well, but I'm hoping to move to v12 to benefit from the new collision engine.

Thanks!

I have the same question. I am creating an option for multiple selected rows to drag and drop and using onBeforeCapture allows me to change the rows displayed to just the rows that are not selected plus a row representing what is being dragged. If a user grabs from the top selected item, this works great, but if the user grabs from a lower selected item, it gets further away from the mouse location.

The UX is almost perfect for my purposes otherwise.

[costea93]

Hi guys, are there any source example of how can this event be implemented. For example here: https://react-beautiful-dnd.netlify.app/?path=/story/onbeforecapture--adding-things

[VanoAkofashvili]

Hi guys, are there any source example of how can this event be implemented. For example here: https://react-beautiful-dnd.netlify.app/?path=/story/onbeforecapture--adding-things

hi, check out this link: https://github.com/atlassian/react-beautiful-dnd/blob/ec06fa266e1617cab2402e0613b36d88b9547f7f/stories/src/on-before-capture/adding-things.jsx

[dalvarez]

I'm also running into this issue where onBeforeCapture changes which will impact the size of draggables in a list are not accounted for and the sizes of the draggables are still "captured" before my state-based change.

hi, check out this link: https://github.com/atlassian/react-beautiful-dnd/blob/ec06fa266e1617cab2402e0613b36d88b9547f7f/stories/src/on-before-capture/adding-things.jsx

I think the example is showcasing using the onBeforeCapture responder well, but it's not showing an example where Draggables within the same Droppable are changing dimensions.