如何让我的 JQueryUI 可拖动元素浮动到另一个溢出的元素中？

Posted 2023-05-08

【中文标题】如何让我的 JQueryUI 可拖动元素浮动到另一个溢出的元素中？

【英文标题】：How can I have my JQueryUI draggable elements float over into another overflowed element?

【发布时间】：2014-01-24 23:57:13

【问题描述】：

我有两个可以在 iPad 上滚动的区域，所以我将它们的溢出设置为自动（或滚动，或隐藏仍然允许在 iPad 上滚动）。

我有一部分未注册的学生，我正在使用 JQueryUI（使用 touchPunch 进行触摸）将一名学生从未注册的学生箱中拖到他们所属的班级中。

这很好用，除非我设置溢出以允许滚动。我想我需要先将元素从其父元素中弹出，然后开始拖动。然后在放置时，将该元素附加到可放置容器。

这是它的一个 JS 容器：

http://jsbin.com/aPaHiVi/3/edit

Contains 1 working and 1 not-working example

问题是，我不确定如何覆盖默认的可拖动代码，并拥有它：

设置到我拾取它的相同位置，但作为其父级父级的子级

将其设置为放置在正确位置的容器的子容器

任何建议将不胜感激！

感谢阅读

【问题讨论】：

用你的代码玩一下我能够做出一个解决方法，你实际上可以使用帮助选项并用滚动拖动它而不会出现像$('o').draggable(helper:'clone');这样的重大问题，可能不是理想的效果设计条款但有效，请查看jsbin.com/OWeyebic/2/edit

你不能在开始拖动时让区域 oveflow:hidden 吗？

克隆是个好主意！然后我可以在用户做出决定后添加/删除孩子。谢谢你

【参考方案1】：

试试这个：

将此添加到您的 CSS：

.nooverflowoverflow:visible;

这是准备好的功能：

$('o').draggable(
    start:function()
    
        $(this).parent().addClass('nooverflow');              
    ,
    stop:function()
    
        $(this).parent().removeClass('nooverflow');            
    
);

【讨论】：

感谢您的建议！这是一个好的开始。 start 和 stop 函数参数本身就是一个很大的帮助。我会做一些测试并接受它是否有效