hello-pangea
Add opt-in behaviour to change how the droppable target is calculated
Hi @wibed :wave:
Thank you for opening this ticket!
Could you properly document the issue in the description of this ticket to avoid back and forth between @hello-pangea/dnd and react-beautiful-dnd repos.
When the droppable target is quite small in comparison to the draggable the library currently provides (in our experience) a pretty poor UX for calculating the current droppable target. This PR maybe be slightly outside the intended purpose of this library but the intention here is to use an alternative method for calculating the droppable target.
The behaviour of finding a candidate droppable is still the same i.e. is there some overlap of the two border boxes of the draggable and droppable but instead of calculating the droppable target using a "furthest from draggable start location" it uses a "closest to pointer position" methodology. I have attempted to ensure that, as with the current implementation the targeting method does not overly favour large (or small) lists too much. I think it provides a pretty sound implementation but am definitely open to any input as I have only skimmed over the parts of the library that I needed to change and am not at all familiar with the rest of the library.
The behaviour for using the different calculation is defined on a Draggable via the use of a new prop. dropTargetCalculationMode="box | pointer" the default value is "box" which reflects the current behaviour and so the new behaviour is opt-in.
option to determine the way boundaries are calculated to determine which dropTarget to choose from. some people have experienced ui issues especially with draggables that overlap multiple targets.
this fix is mostly out of behavioral expectation as seen in this representation https://camo.githubusercontent.com/b6117c50c67befcde1d09a2332e89a20a677321c1b85abc52115465fe9525383/68747470733a2f2f7463332d696d672d6465762e73332e65752d63656e7472616c2d312e616d617a6f6e6177732e636f6d2f30343630616137383164386437363963336263303238313566636334383932393631323638306131346361363337626562373961346339633263613833393736