Is there a way to move an element outside of a container with overflow hidden when using drag and drop functionality in CSS? Currently, when I drag an element with the "item" class, it stays within the confines of the container with overflow set to hidden. How can I make it move outside of the container while dragging?
<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 attempted to append the dragged item to a different parent element, but then it doesn't return to the original holder. Any suggestions on how to solve this issue would be greatly appreciated!
Attempted code for appending the item:
$('.item').draggable(
helper:'clone';
revert:'invalid',
start:function(){
$(this).parent().parent().append(this);
}
)