Problem

Solution

Brython implements an API based on HTML5 drag and drop specification. In the
basic form presented in this example, it consists in defining callback
functions for 3 events :

dragstart on the draggable element (when the user starts dragging it)

dragover on the destination zone (when the draggable element is moved over
it)

drop on the destination zone (when the user releases the mouse button)

To attach the function callback to an event on an element, we use the
method element.bind(event,callback)

The callback functions take a single argument, an instance of DOMEvent. To
communicate information during the drag and drop operation, the event has an
attribute data that receives a value in the callback associated to
dragstart ; this value is used in the callback associated with drop to
identify the element that is being dropped.

In the example, when the draggable object has been dropped, it can't be
dragged any more ; for this, we remove the bindings attached to an event on
this object using the method element.unbind(event)