Drag And Drop Beta

EuiDraggable makes very few assumptions about what content it contains. To give affordance to draggable elements and to ensure a consistent experience, child elements must be able to accept a border and drop shadow (automatically applied via CSS). No other style opinions are applied, however.

Similarly, EuiDroppable must accept a background color overlay (automatically applied via CSS), but has no other restrictions.

All EuiDragDropContext elements are discrete and isolated; EuiDroppables andEuiDraggables cannot be shared/transferred between instances. Also, EuiDragDropContexts cannot be nested. It is recommended that a single, high-level EuiDragDropContext is used andEuiDroppables account for categorical and functional separation (see later examples).

EuiDragDropContext handles all eventing but makes no assumptions about the result of a drop event. As such, the following event handlers are available:

• onBeforeDragStart
• onDragStart
• onDragUpdate
• onDragEnd (required)

EUI also provides methods for helping to deal to common action types:

• reorder: change an item's location in a droppable area
• copy: create a duplicate of an item in a different droppable area
• move: move an item to a differnt droppable area

The simplest case, demonstrating a single EuiDroppable with reorder behavior.

Notice the ability to change rendered content based on dragging state.EuiDraggable children is a render prop that mush return a ReactElement. The snapshot parameter on that function has state data that can be used to alter appearance or behavior (e.g., isDragging).

By default the entire element surface can initiate a drag. To specify a certain element within as the handle, setcustomDragHandle=true on the EuiDraggable.

The provided parameter on the EuiDraggable children render prop has all data required for functionality. Along with the customDragHandle flag,provided.dragHandleProps needs to be added to the intended handle element.

EuiDraggable elements can contain interactive elements such as buttons and form fields by adding thedisableInteractiveElementBlocking prop. This will keep drag functionality while also enabling click, etc., events on the interactive child elements.

By default, all EuiDroppable elements are of the same type and will accept EuiDraggable elements from others in the same EuiDragDropContext.

The EUI move method is demonstrated in this example.

Setting the type prop on an EuiDroppable element will ensure that it will only acceptEuiDraggable elements from the same type of EuiDroppable.

Notice that the enabled, compatible EuiDroppable elements have a visual change that indicates they can accept the actively moving/focused EuiDraggable element.

For cases where collections of EuiDraggable elements are static or can be used in multiple places set cloneDraggables=true on the parent EuiDroppable. The EuiDroppablebecomes disabled (does not accept new EuiDraggable elements) in this scenario to avoid mixed content intentions.

The EUI copy method is available and demonstrated in the example below. Note that the data point used asdraggableId in EuiDraggable must change to allow for real duplication.

isRemovable is used in the example for cloned items. This API is likely to change, but currently provides the visual changes with drop-to-remove interactions.

EuiDraggables in EuiDroppables, EuiDroppables inEuiDraggables, custom drag handles, horizontal movement, vertical movement, flexbox,EuiPanel Inception, you name it.