Support drag and drop for multiple selected items

Desired behavior

As a user of Studio, when I toggle to select multiple resources or topics in the topic view, I would like to be able to initiate drag-and-drop of the entire selection by dragging any one of the selected nodes.

Current behavior

Only the item with which drag-and-drop was initiated is actually dragged and dropped.

Value add

Users can make better use of bulk editing channels through multi-selection drag-and-drop.

Considerations

We originally had this designed for Studio, but due to some time constraints as well as some design questions, it was put on hold. Here are some areas for consideration:

• Is it clear to a user that selecting multiple items and initiating drag-and-drop from just one of those resources would cause drag-and-drop for all? What if the user selects multiple items and drags an unselected item?
• When drag-and-drop is initiated for a single item, we create a blank space where the node was. For multiple items, it seems awkward to blank out a large portion of the view. If we hide them, it could cause awkwardness with the UI's transition to and from that state. Perhaps we should move towards a new UI representation for items currently being dragged.
• As it was designed, dragging multiple items would update the floating placeholder's display such that it clearly represents multiple items being dragged. This is somewhat tied to some feedback given on the wobbliness of the floating placeholder. It's been improved since, but will never match the native HTML5 placeholder which is actually an image.

Technical notes

The utility code was built to facilitate multi-selection drag-and-drop, so little work should actually be required to enable it technically speaking. The corresponding UX needs most of the attention.

Start by reviewing the existing multi-selection drag-and-drop utility and the Studio topic view. Define the UX for selected versus unselected nodes, dragged-item placeholders, and the floating representation; done means dragging a selected node moves the full selection with a clear, consistent UI.