Draggable - how to drag out of a DIV?

Draggable - how to drag out of a DIV?

Hi,

I got a layout and wanted to put a draggable and droppable in it, but I cannot move the draggable DIV-s outside.

The layout:

  1. <div id="layout">
  2.     <div id="menu">
  3.         <div id="accordion">
  4.             <h3 class="lvl1">
  5.             <div class="lvl1 lvl">
  6.                 <div class="material u303" title="U303">
  7.                 <div class="material u321" title="U321">
  8.                 <div class="material u129" title="U129">
  9.                 <div class="material u622" title="U622">
  10.     <div id="gallery">
  11.     <div id="content">
I have materials listed in DIV.lvl1 as .material DIV-s and wanted to drag the selected material to a DIV inside DIV.material. (And than change the DIV's CSS it was dropped on to get a review of it.)

BUT!

When I drag the .material I cannot drag it out from the DIV.lvl1 container. If I change the CSS to overflow: hidden it is hidden outside it.

Here is the JS I use to load draggable:
  1.     $( ".material" ).draggable({
  2.         opacity: 0.7,
  3.         helper: "clone"
  4.         });
Thanks for any response!
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
(o: TeeCee, the One and Only :o)