i am not the best at explaining things and very sorry for poor english.
Before reading on, please have a look at this fiddle : [url removed, login to view]
And please have a look at the attached image as well.
The image is color coded so to say, so whiles i explain what I need I refer to these colors (RED, GREEN, BLUE, PINK, YELLOW) for better understanding.
In short, I need the result to:
- have 3 drop-zones (RED) in each of the tabs (YELLOW) that means we will have 9 (RED) dropzones 3 in each tab (YELLOW) when finished
- have items (GREEN)
- have item-containers (BLUE)
- have zones (RED) that accept item-container (BLUE/PINK) and items (GREEN)
- have 1 type of container (PINK) that accepts other container (BLUE) and items (GREEN)
- have 1 type container (BLUE) that NOT accepts other container but only accepts items
- have 1 type container (BROWN, NOT IN PICTURE) that NOT accepts items but only accepts other container
- items can not contain items, only container (BLUE/PINK) and zones (RED) can accept items (GREEN)
- containers and items can be dragged and dropped in 1 of the 3 zones (RED) in the active tab and can be dropped to inactive tab (YELLOW)
- all item- & tab- positions must upon change be saved in a mysql table (sorting of tabs, and sorting of items and position of items (tabs))
Ups, I forgot, all the fields, containers and tabs must be created from database. That means not only the position is save in Mysql but also the object itself. I want to be able to add tabs, container and images from database. thanks
This should be done with only jquery + jqueryui and with as little code as possible!