[Feature]: Drag and Drop Components

[thompsongl]

Drag and Drop. DragNDrop. DnD. Draggable. Droppable. Reorderable. Sortable. We need 'em all.

Approach for creating generic components that can be used throughout the applications already implementing (or needing to implement) the various flavors of drag and drop UI:

1) Extend the functionality of an existing solution with EUI interaction styles and defaults. We want to avoid jQuery and remain in the React ecosystem. react-beautiful-dnd is leading candidate as it is already used in Kibana (see Canvas, SecOps) and accounts for most a11y cases. 2) Write components for basic list UI, including sorting. 3) Extend components from 1 & 2 to create a more comprehensive drag and drop manager solution. The upcoming Kibana visualize editor is a prime case. 4) Table support, including row and column sorting.

Existing issue reference: #1569 #1425 #313

---

Update (ongoing):

Extension

react-beautiful-dnd is remains the extension target

EUI Opinions

• Styles for states only
  • Styles are automatically applied to the main element (EuiDroppable) or child element (EuiDraggable) via classes
  • Stateful derivatives are passed through via context or render props
• BYOElement
  • Draggable elements will have classes applied, but will otherwise be unaltered
  • Must be ReactElements (no naked strings or numbers)

EUI Features

• Extra context layer(s) for shared data
• Copy/Clone draggable elements
  • react-beautiful-dnd does not natively support this
  • Temporary duplication (placeholder until move is complete). Doesn't make sense in sort-only contexts.
  • Immutable lists (dragging is a clone-and-add-elsewhere action). Only makes sense in 'template' builder scenarios
• Provide built-in, importable functions:
  • move
  • reorder
  • duplicate

[flash1293]

Does react-beautiful-dnd support dragging/dropping between multiple react contexts? In Kibana various parts which could get integrated via DnD originate from individual ReactDOM.render calls. No hard requirement though, if this is complicated to provide I think we could refactor around it.

[thompsongl]

@flash1293 This is a good item to add to the evaluation criteria. At the very least we can make note of support if all options are lacking.

[flash1293]

I'll just write down some things which will probably be needed in the future - they don't necessarily have to be directly supported by the EUI solution, but it would be nice if they could be considered:

• "Copy and paste" things as a separate way of getting things from A to B without a mouse (Can of course be built completely separately, but IMHO this is the same functionality with a different face)
• Multi-drag
• Elements register themselves globally on what can be dropped on them and only react to these events.

[cchaos]

@thompsongl Do we think this original ticket has been satisfied and can close for more specific issues/feature requests?

[thompsongl]

Yes. I'll get a couple high-level feature tickets made and close this

[thompsongl]

Closing in favor of more granular issues and feature requests.