Javascript Grid UI - Draggable & Resizeable

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

Grid UI example

@AsifMahamud - Yes I am aware about that but am looking if there is something ready off the shelf which does all the above which combines dragging & resizing, snapped to a grid and doesn't allow overlaps — Mark Cassar, Mar 11 '14 at 12:27

score 1 · Answer 1 · answered Dec 20 '14 at 20:50

1

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

answered Dec 20 '14 at 20:50

moodboom

6,225
2
41
45

That sounds a very interesting option. I will take a look into it in more depth. Thanks for your recommendation! – Mark Cassar Dec 22 '14 at 11:26

score 0 · Accepted Answer · edited May 23 '17 at 12:15

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.

Javascript Grid UI - Draggable & Resizeable

2 Answers2