[Dashboard][Collapsable Panels] Move panel element directly

[ThomThomson]

In kbn grid layout the drag preview follows the mouse position and appears above the grid. The actual element being dragged snaps to its final destination in the grid under the drag preview.

In react grid layout and many other products, the actual element follows the mouse position directly during a drag, and the drag preview appears behind the actual element to show the final destination of the drag operation.

We should consider swapping this behaviour.

react grid layout	kbn grid layout

POC here

[teresaalvarezsoler]

I can see how the new behaviour can be also valid. We should test if it is problematic for users before making any changes. Let's keep it open for now but leave it till the end of the project.

[Heenawter]

In order to properly add an "on drop" event listener, I believe this is actually necessary and not a nice-to-have - I am assigning it to myself to explore further since, if this is the case, it is blocking my API work.

As a summary for why I need this, as part of the API work, I was thinking through what events the Dashboard (or any consumer of our grid layout) would need access to - and I realized we would need an onLayoutChange callback. However, our current "on layout change" event fires any time an element is moved/updated (i.e. any time a layout change happens from a collision, and not only when you drop the item you are dragging). For the Dashboard use case, this is not ideal, because that means that the unsaved changes would be triggered before the panel is dropped, which is different than the current behaviour.

The problem is, by dragging a preview and not the actual element, the onMouseUp event is not being triggered properly for the drag handler icon - so we have no way of knowing when a panel has been dropped. We are currently getting around this by adding an onMouseUp listener to the entire document, but this fires for every mouse up event - i.e. every click - not just for panel drag events. And we don't want our onLayoutChange to be called on every click.

Hence, why I am currently exploring dragging the real element as a solution.

There is a potential workaround where we still attach the onMouseUp listener to the document, but in this listener, we only call the onLayoutChange when the layout is different - however, this isn't ideal IMO. So we'll see how far I can get with this, instead.