Javascript Grid UI-可拖动和可调整大小

Question

I am not sure if this is the correct place to ask such a question but I am looking to find a javascript component which does the following functions:

• Have an amount of columns / rows
• The grid will have several items in it, the width of the items can spread multiple columns and rows but fits in the grid
• User must be able to drag elements around but not overlapping other elements
• User must be able to resize elements in all directions but again, not overlapping other elements
• Attach to events on resize / drag in order to communicate such changes with backend

The image below depicts a visual example of what I am looking for. In the below example, the X-axis would represent time slots while the Y-axis would represent Table Nos and hence the red blocks below are denoting:

• Table #2 allocated from 12:00 - 15:00
• Table #4 allocated from 15:00 - 17:00
• Table #6 & 7 allocated from 14:00 - 16:00

Answer 1

I'm not sure if it was available when you needed it, but gridster seems to do everything you are after.

Answer 2

After several researching and didn't manage to find something suitable, I just made something simple using jQueryUI as a proof of concept which can be seen on my pen on CodePen which supports the creation of a 5 x 5 grid, sample 3 'booked slots' which you can drag on the pink slots and resizeable.

Unfortunately, jQueryUI has got a bug which is quite old and have never been fixed which is revert 'invalid' with grid doesn't return to start position with jQuery UI Draggable .