Before reading on please be sure you have working experience with Jquery UI !!
Please have a look at this fiddle : [url removed, login to view]
And also have a look at this image: [url removed, login to view]
Your job would be to complete the code that you found at fiddle above.
The image is color coded so to say, showing the fiddle when your work is done ;)
Whiles explaining I'll refer to the colors (RED, GREEN, BLUE, PINK, YELLOW) in the image, for better understanding.
1. Items, Tabs & Containers should be managed through 2 mysql tables
- each item, container & tab is = a row in mysql
- items can not contain other items
- only container (BLUE/PINK) and drop zones (RED) can accept other container or items
- all the items, containers and tabs must be created from database!
Example mysql table for Items&Containers:
this would produce a container (BLUE) with 4 items (GREEN) in it.....
Example for TAB table:
this would produce the 3 tabs (YELLOW) in the image.
2. Items are:
- GREEN in image
- simple DIV's like: <div class="item" style="height:20px; width:100px;"></div>
- draggable, droppable, sortable
3. Containers are:
- simple div's <div class="item" style="height:20px; width:100px;"></div>
- can contain (UI accept) items (GREEN)
- can contain (UI accept) container (GREEN)
4. Zones (RED):
- each tab has 3 zones
- zones accept containers (BLUE/PINK)
- zones accept items (GREEN)
- all item- and tab- positions must upon change be saved in a mysql table (sorting of tabs, and sorting of items and position of items (tabs))
I want to be able to add tabs, container and images from database
- when more tabs are added, then new dropzones must be available in each of them as well..
This should be done with only jquery sortable, draggable, TAB / jqueryui and with as little php code as possible!
Please ask when you have questions, please don't bid if you never worked with UI before.