Create droppable targets for draggable elements.
Droppable
class creates drop targets that can receive draggable elements. First, create a DragDropManager instance:
accepts
property. See the draggable types documentation for more details.
Droppable
class uses rectangle intersection to detect when draggable elements are over the drop target:
closestCenter
detector will detect collisions based on the distance between the center points, which is ideal for card stacking:
Droppable
class accepts the following arguments:
shapeIntersection
: Default, uses rectangle intersectionpointerIntersection
: Uses pointer position for precise detectionclosestCenter
: Uses center point distance, ideal for card stackingdirectionBiased
: Considers drag direction, useful for sortable liststrue
to temporarily prevent dropping on this target.destroy()
method of this instance.Droppable
instance provides these key properties:
id
: The unique identifierelement
: The DOM element acting as the drop targetdisabled
: Whether dropping is currently disabledisDropTarget
: Whether a draggable is currently over this targetshape
: The current bounding shape of the drop targetaccepts(draggable)
: Check if this target accepts a draggable elementrefreshShape()
: Recalculate the target’s dimensionsregister()
: Register this target with the managerunregister()
: Remove this target from the managerdestroy()
: Clean up this droppable instance and remove all listeners