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

Posted 2023-05-08

【中文标题】Jquery UI - 从显示中获取一个元素：拖动时隐藏元素

【英文标题】：Jquery UI - Getting one element out of a display:hidden element when dragging

【发布时间】：2010-11-18 12:06:43

【问题描述】：

我有一组元素位于另一个元素中的“传送器”元素上，该元素设置为溢出：使用 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);
     
)

【参考方案1】：

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

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

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

感谢您的帮助！

【参考方案2】：

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

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

【参考方案3】：

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

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

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

【讨论】：

两者都试过了...但无济于事...如果我尝试将它移到 '.holder' 的范围之外，'.item' 仍然是隐藏的，因为（我需要弄清楚如何以某种方式克服）“.holder”隐藏了它的子元素“.item”。有人告诉我这不是一个容易解决的问题。