Drag and drop canvas and save

We need someone to help us do up a frontend page with the following on a blank canvas element. 1) Drag and resize boxes onto a canvas. On drop, open a modal to add a title which would add a text label at the top of the box. Boxes can have different colors. Box size and location should be stored. 2) Drag and drop <div> objects onto a html canvas and upon dropping store the x, y, z location on a canvas. On drop, open a modal to add a title which would add a text label at the bottom of the object. Objects should have a gear icon at the top with a modal that allows for adding in other stuff. 3) Drag and drop arrows that can be right angled to connect object from 1 and 2. On drop, open a modal to add a title which would add a text labe to the side of the object. Please have multiple arrows of different colors. 4) Be able to open up the page and see everything saved previously. Screen shot is what it should look like and the included html is a template for the css. Please use boostrap for modal and styling.