HTML drag and drop dashboard with resizable elements

Question

I'm trying to develop a control where one must be able to add elements, move and resize them. The idea is to draw small diagrams by dragging some elements to the dashboard. Here is what I'm trying to accomplish:

• The dashboard must have fixed boundaries (left/right/bottom/top). Elements should collide with them and not go beyond.

• Elements can be added with a button or dragged from a repository

• Elements must be resizable

• Elements should collide

• Elements must be movable - freestyle, NOT adjust at the top like gridster or gridstack. I need to be able to put an element at the bottom or at the middle of the dashboard and have empty spaces.

• I must be able to get all the necessary data from the elements in order to store and recreate the dashboard (save & load).

I started by creating this small test project using the drag & drop features, but soon got the feeling I was trying to reinvent the wheel and maybe doing it in an unnecssary old fashioned way.

But after a few searches, I still didn't find one plugin/control that behaves the way I need or is easy enough for me to change.

Gridster and gridstack make the elements go at the top. TinyDraggable looks nice, but is not resizable. I did try to make the div elements .resizable() (adding the jQueryUI) but I wasn't able to make it work. This plugin does not have (I think) collisions, which would be OK if I managed to get everything else needed. I do like the freedom of movement of the draggable items compared to my tiny project where they go from slot to slot.

So, the question is: do you know if there is any suitable plugin (jQuery) for me? Ready to use or easy to configure/change?

Many thanks

Solution

Try https://github.com/troolee/gridstack.js with float mode. In this mode widgets do not go to the top of container.

The library is in active developing. So I can implement missing reasonable features.