Trouble with using droppable/draggable positioning inside a Carousel
Hello all,
I have been finding some problems with positioning of divs when their "container" is inside a carousel slide.
This sort of thing...
- $("#dragc11").appendTo("#dropc1")
- $("#dragc12").appendTo("#dropc1")
- .position({ my:'center center', at:'center center', of:"#dropc1" })
- $("#dragc13").appendTo("#dropc1")
- .position({ my:'center center', at:'right center', of:"#dropc1" })
... where "#dragc11" etc are
draggables and "#dropc1" is a
droppable.
Specifically I use the (jQuery) Carousel within Twitter Bootstrap. I have created a
fiddle to show my problem.
Essentially this shows that I want to layout three draggables in the format shown in the lower part of the screen.
I have the same collection of divs (different IDs of course) in the three slides of the Carousel but the layout only ever "works" for the slide marked as "active" (i.e. the one that has focus in the Carousel). When you scroll to the other slide you will see the positioning is thrown out.
It feels like the non "active" ones go nuts because their coordinates are messed up by the Carousel.
I really hope this is something I am doing wrong. My real world problem is more complex than this but I think it's related. I think I've captured it quite closely in the fiddle.
Any help much appreciated!
Chris