What we need a drag and drop layout builder in JQuery.
It will be three level drag-drop process with these items;
- Fixed size big columns,
- Resizable normal columns,
- 10-15 different modules
As you can see in attached file;
- These items will be listing on a toolbar and user can drag and drop them to the canvas in between any items as they like.
- Fixed big columns (yellow) can't be resized and can only be placed in canvas (green). You can add unlimited big columns to the canvas.
- Normal columns (blue) can be resized, can placed in canvas or inside a big column. You can add unlimited normal columns to the canvas and inside a big column.
- Modules (purple) can't be resized, can placed in canvas or inside a big column or inside a normal column. You can add unlimited columns to the canvas and inside a big column and inside a normal column.
According to the rules above, all items can be sortable in any possible way.
- All items will have 3 basic control. Edit, Clone, Delete. Normal column also have a 2 arrow to resize it to 5 different size. 1/1, 1/2, 1/3, 1/4, 1/5. We will populate it later.
- Edit means, fixed size big columns and 10-15 different modules will all have uniqe settings inside their hidden input area as a short arrayed code (sort of like wordpress shortcodes).
- User will click and open a modal and see the uniqe settings. Settings mostly will be 5-10 standart inputs listed one below another. Input types will be text, selectbox, radio, checkbox and color picker.
- What we want from you is one working settings box for big column and one for a selected module. We will populate the rest for different modules.
Although it may looks complicated, this is something that done so many times so we will have lots of reference projects to go through.
You can ask us anything you like about the project.
Our timeline is between 25-30 days.
10 freelancers are bidding on average $565 for this job
I have used JQuery and JQueryUI extensively in various projects. I will finish the work in 10 days along with extensive documentation (including code level).