The bounding box of an element is the smallest possible rectangle (aligned with the axes of that element’s user coordinate system) that entirely encloses it and its descendants.This means that even if the draggable or droppable nodes look round or triangular, their bounding boxes will still be rectangular:
– Source: MDN
DndContext
uses the rectangle intersection collision detection algorithm.
The algorithm works by ensuring there is no gap between any of the 4 sides of the rectangles. Any gap means a collision does not exist.
This means that in order for a draggable item to be considered over a droppable area, there needs to be an intersection between both rectangles:
pointerWithin
collision detection algorithm so that you can fall back to a different collision detection algorithm for the Keyboard sensor.pointerWithin
collision detection algorithm. As its name suggest, this collision detection algorithm depends on pointer coordinates, and therefore does not work when using other sensors like the Keyboard sensor. It’s also a very high precision collision detection algorithm, so it can sometimes be helpful to fall back to a more tolerant collision detection algorithm when the pointerWithin
algorithm does not return any collisions.
closestCenter
and rectangleIntersection
collision detection algorithms.