JQuery UI - output of one element from the screen: hidden element when dragging

Question

I have a group of elements sitting on a conveyor element in another element that is set by overflow: hidden using css. How can I get an element "outside" of the holder element when dragging, which has an overflow set to hidden? When I drag the classified image “item”, it only moves inside the holder, when I try to move it “outside” the holder, it is hidden and will not move beyond the old element of the holder.

<div class="holder" style="overflow:hidden;">
     <div class="conveyor">
          <img src="image1.jpg" class="item" />
          <img src="image2.jpg" class="item" />
          <img src="image3.jpg" class="item" />
     </div>
</div>

<script>

     $('.item').draggable();

</script>

I also tried adding the newly moved item to the parent item, but then the item won't come back to my holder .... please help!

tried to add an element:

$('.item').draggable(
     helper:'clone';
     revert:'invalid',
     start:function(){
          $(this).parent().parent().append(this);
     }
)

Answer 1

→ http://docs.jquery.com/UI/Draggable. Yeesh... !

, appendTo, . , .

$('.selector').draggable({ appendTo: 'body' });

!

Answer 2

-, . :

// Drag and Drop
$('.draggable').draggable({ 
    revert: true,
    appendTo: 'body',
    helper: 'clone'
});

Answer 3

Do each of them have what you want?

$('.item').draggable( {containment: 'window'} );

$('.item').draggable( {containment: 'document'} );