[WIP] Implement drag and drop feature for widgets

[btel]

This is a PoC implementation of a drag and drop feature for widgets. So far we enable the dragging for Label widget and define a drop area in Box.

Features

This PR implements:

• DraggableLabel,
• drop zone for Box containers and subclasses
• DropBox - wrapper to make arbitary widgets drop zones
• DraggableBox - wrapper to maker abitrary widgets draggable
• drop behaviour can be implemented using Python on_drop handlers
• draggable widgets can set extra data on draganddrop events
• Draggable and Droppable mixins on TS side to allow adding drop/drag behaviour to any widgets

Examples

All examples can be found in this notebook:

https://nbviewer.jupyter.org/github/jupyter-widgets/ipywidgets/blob/71cf58c6beafaafd98c7af92bf21c830236e0209/docs/source/examples/Drag%20and%20Drop%20examples.ipynb

Here is a basic example (note that the draggable Label is now called DraggableLabel):

Here is a more advance example:

Theory

Here is a pure JS demo of drag and drop feature: https://jsfiddle.net/q935mp27/1/

and mozilla tutorial: https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API#The_basics

[btel]

Here is another example with draggable columns to create plot:

And notebook to generate this example (based on this PR):

https://nbviewer.jupyter.org/gist/btel/e271d8788f674536b9c077520452e344

[wolfv]

here is another package that could serve as inspiration (from the React community)
https://github.com/atlassian/react-beautiful-dnd

[maartenbreddels]

We have a similar issue open in ipyvuetify: widgetti/ipyvuetify#2
would be great to have compatibility between the two.

[pbugnion]

Thanks very much, @btel . Looking forward to this getting merged!

I'm going to close this PR in favour of Wolf's rebased version (#2670) to avoid people commenting directly here.