Jquery UI - Getting one element out of a display:h

问题:

I have a group of elements sitting on a 'conveyor' element within another element that is set overflow:hidden using css. How do I, when dragging, get the element 'out' of the holder element that has overflow set to hidden? When I drag the "item" classed image, it only drags within the holder, when I try to move it "outside" the holder, it hides, and won't move outside the old holder element.

<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've also tried to append the newly moved element to a parent element, but then the item won't revert back to my holder.... please help!

tried to append item:

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

回答1:

Found the answer here -> http://docs.jquery.com/UI/Draggable. Yeesh... that was a few hours of digging!

The element passed to or selected by the appendTo option will be used as the draggable helper's container during dragging. By default, the helper is appended to the same container as the draggable.

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

Thanks for the help!

回答2:

First, thanks to David. In my case I had to add another option:

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

回答3:

Do either of these get what you want?

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

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