Creating a Drag & Drop Forms designer with Gridstack.js

I'm currently writing software to design Forms. I want to have a visual Forms designer, where you can place controls on the form and relocate them using drag & drop functionality. For this functionality I want to use the [login to view URL] library, which is a jQuery plugin. The [login to view URL] library can be found at [login to view URL] I need the following functionality; - The ability to drag & drop controls on the Form - The controls consist out of a Label (which should be located on the left) and an Input control (which should be located on the right) - When resizing a box, the label and input control should also properly resize - Users must be able to click on a control (box) twice, then a modal (popup) should open where you can specify additional control properties (e.g. validation, min/max values, etc). These control properties vary per control (important). For the demo project, only three controls have to be implemented; - Textbox control - Integer control - Checkbox control The application must have the ability to export the generated json of the form. In the [login to view URL] demo project there is already an example of how to do this (in [login to view URL]). I need this functionality so I can save the form layout to a database. I added a screenshot on how it should look like. However, you only have to implement the functionality, so you don't have to worry about styling. However, the basic layout (controls on the left, forms designer on the right) should be the same.