When using the “line” style, make sure to set the appropriate direction attribute within the dropZone prop based on the orientation of your draggable view. By default, this is set to “vertical,” but it can also be adjusted to “horizontal.” Note that the direction attribute only applies to the “line” style and does not affect other drop zone styles. The default color for “line” is “primary” and “purple” is the only alternative color option.

The length of the line is calculated based off of the width (for “vertical”) or height (for “horizontal”) of the parent container holding the draggable items.

Additionally, if the parent container of the DraggableProvider/DraggableContainer (or a subcontainer within) does not have a set height (for “vertical”) or width (for “horizontal”), like the Draggable Drop Zones doc example does, elements on the page may jump up (for “vertical”) or to the left (for “horizontal”) when an item is actively being dragged. To prevent this, give a parent element a fixed height (for “vertical”) or width (for “horizontal”) as demonstrated in this doc example.