Hi,
I am creating a web page which utilises drag and drop to create a custom calendar. Basically, there are two containers within divs. One container stores a pallet of 68 images (DragDropContainer). The other container (mainContainer) has 13 separate containers (i.e. January, February, March etc). To create the calendar you drag an image from the pallet and drop it into the month required. At the end you whack save and the info will be posted through a form.
I am attempting to modify a script from dhtmlgoodies.com (http:///www.dhtmlgoodies.com/scripts/drag-drop-nodes/drag-drop-nodes-demo3.html). I have used images instead of text boxes and thus an ordered list of 68 images is a lot of pixels on the page and not really conducive to an easy to use solution. I wish to create 4 columns of 17 images but have run into problems. If I create four seperate div's with 17 images in I lose 3 of the 13 separate containers in my MainContainer. Also if I create 2 columns I lose 1 container and again if I create 3 columns I lose 2 containers.
I am looking for a solution that allows me to break up my DragDropContainer div into 4 columns whilst not losing any of my 13 containers.
I have posted two pages on my site. The first (http://www.jamespaulphotography.co.uk/developmentcalendar.html) shows the the page layout with all the pallet images in one div, one column. Images can be dragged into all months with no problem. The second page (http://www.jamespaulphotography.co.uk/developmentcalendar2.html) is my attempt at using 4 divs to create 4 columns. If you try and place an image inside October, November or December it will not take.
Any help/suggestions is really appreciated. All CSS, Javascript etc is in one file so viewing source is easy.
I am creating a web page which utilises drag and drop to create a custom calendar. Basically, there are two containers within divs. One container stores a pallet of 68 images (DragDropContainer). The other container (mainContainer) has 13 separate containers (i.e. January, February, March etc). To create the calendar you drag an image from the pallet and drop it into the month required. At the end you whack save and the info will be posted through a form.
I am attempting to modify a script from dhtmlgoodies.com (http:///www.dhtmlgoodies.com/scripts/drag-drop-nodes/drag-drop-nodes-demo3.html). I have used images instead of text boxes and thus an ordered list of 68 images is a lot of pixels on the page and not really conducive to an easy to use solution. I wish to create 4 columns of 17 images but have run into problems. If I create four seperate div's with 17 images in I lose 3 of the 13 separate containers in my MainContainer. Also if I create 2 columns I lose 1 container and again if I create 3 columns I lose 2 containers.
I am looking for a solution that allows me to break up my DragDropContainer div into 4 columns whilst not losing any of my 13 containers.
I have posted two pages on my site. The first (http://www.jamespaulphotography.co.uk/developmentcalendar.html) shows the the page layout with all the pallet images in one div, one column. Images can be dragged into all months with no problem. The second page (http://www.jamespaulphotography.co.uk/developmentcalendar2.html) is my attempt at using 4 divs to create 4 columns. If you try and place an image inside October, November or December it will not take.
Any help/suggestions is really appreciated. All CSS, Javascript etc is in one file so viewing source is easy.