Drag and Drop in perspective


In a perspective application we are developing, we would like to use “drag and drop” extensively.

Specifically, it would allow us to solve different functionalities in a very visual and intuitive way: from being able to dynamically configure part of the plant layout, to being able to define ordered lists of priorities (in what order a production list will be executed, or given a group of redundant engines in what order they will be started, etc.).

In HTML there is the “Drag and Drop API” https://www.w3schools.com/html/html5_draganddrop.asp, however, the associated events (ondrop, ondropover, ondragstart, etc.) are not available in Perspective.
We have been testing alternative solutions. For example we have tried an alternative based on the solution proposed by https://forum.inductiveautomation.com/t/perspective-mouse-click-drag/28583/18. However, it does not behave very smoothly, nor do we end up finding a way to make it work well in all the areas we need. For example, the elements on which we would allow drag and drop should be able to be inside a table, without a view canvas.

We have also been testing doing a fake drag and drop by playing with onMouseDown and onMouseUp events, combined with onMouseEnter and onMouseLeave, and modifying the page styles to make the mouse pointer the “dragging hand” when dragging. But the result is pretty lousy visually as you can’t see the object you want to drag.

Has anyone had a similar problem?

Thank you very much!

It’s not a perfect solution, but could you adapt the Dashboard Component to your needs?

I have been testing the Dashboard component. It is a better solution than the ones I had tried. But I think I will not be able to adapt it for the required features.

The main problem is that widgets can be removed and added, and I couldn’t find a way to disable these two options. All elements should always be on screen.

Also, it is very rigid both aesthetically and in the way it behaves.By scripting I could partially solve the second problem, (for example, revert “drag and drop” actions that should not be allowed, revert widget size changes, etc, although visually it would be a bit contradictory).