When using the “line” style, make sure to set the appropriate direction attribute within the drop_zone_direction prop on the draggable/draggable_container component based on the orientation of your draggable view: “vertical” or “horizontal.” Note that the direction attribute only applies to the “line” style and does not affect other drop zone styles. Also, set the drop_zone_line_color prop on the draggable/draggable_item component to “primary” or “purple”.

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 draggable/draggable/draggable_container (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.