Draggable divs from accordion

Question

I have created a pop out sideBar. In that sideBar I have a accordion which contains divs. Those divs are draggable. The user can drag those divs and position them main page.

The problem that I am experiencing is that when the divs are dragged they are not visible outside the accordion. This can been seen in This video.

I can see that it is to do with the overflow being set to hidden however when I remove this the accordion content is shown when it should be hidden.

overflow: hidden;

JSFiddle to further show my problem.

How could I possibly fix this / what are possible ways to get around it.

Answer 1

Try adding this to your css

.accordion-heading + div.accordion-body {
     position: static;
}

Is this what you are looking for? Updated fiddle http://jsfiddle.net/gNAFY/3/ If this solved your problem, it seems that inside bootstrap.css file, at line 5245, "position: relative" rule makes your divs not appearing outside the accordion. So you need to "reset" position to static. For "el + el" css selector to work in IE8 and earlier, don't forget the <!DOCTYPE>.