jquery - Jquery UI - 从显示中获取一个元素：拖动时隐藏元素

Question

我有一组元素位于另一个元素中的“传送器”元素上，该元素设置为溢出：使用 css 隐藏。我如何在拖动时将元素“移出”溢出设置为隐藏的支架元素？当我拖动“项目”分类图像时，它仅在支架内拖动，当我尝试将其移动到支架“外部”时，它会隐藏，并且不会移动到旧支架元素之外。

<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>

我还尝试将新移动的元素附加到父元素，但是该项目不会恢复到我的持有者....请帮助！

试图附加项目：

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

Answer 1

在这里找到答案-> http://docs.jquery.com/UI/Draggable。是的......那是几个小时的挖掘！

appendTo 选项传递或选择的元素将在拖动过程中用作可拖动助手的容器。默认情况下，助手被附加到与可拖动对象相同的容器中。

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

谢谢您的帮助！

Answer 2

首先，感谢大卫。就我而言，我不得不添加另一个选项：

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

Answer 3

这些中的任何一个都能得到你想要的吗？

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

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