CODEWITHSUNDEEP
jquerycssjquery-uioverflowdraggable
david
david

Reputation:

Jquery UI - Getting one element out of a display:hidden element when dragging

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);
     }
)

Upvotes: 3

Views: 1052

Answers (3)

Derekthar
Derekthar

Reputation: 543

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

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

Upvotes: 1

david
david

Reputation:

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!

Upvotes: 2

jimyi
jimyi

Reputation: 31191

Do either of these get what you want?

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

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

Upvotes: 0

Related Questions