JQuery 可在溢出内拖动：自动 div 被限制在 div 内答案

【问题标题】：JQuery draggable within an overflow: auto div is confined within the divJQuery 可在溢出内拖动：自动 div 被限制在 div 内
【发布时间】：2010-06-22 13:55:53
【问题描述】：

我有一个设置了高度/宽度的可拖动 UL。此可拖动列表可以拖动到可排序列表中。

我的代码：

$(".serviceMembersAvailable li").draggable({
    helper: 'clone',
    connectToSortable: '.serviceMembersAssigned'
});
$(".serviceMembersAssigned").sortable({
    connectWith: '.serviceMembersAssigned',
    placeholder: 'servicePlaceHolder',
    update: function(event, ui) {
        Services.memberAssigned($(ui.item));
    }
});

我的 CSS：

ul.serviceMembersAvailable {
    height: 160px;
    overflow: auto;
}

它工作正常，直到我通过在 CSS 中设置“溢出：自动”给可拖动列表滚动。当我拖动 LI 时，它包含在溢出中，因此我实际上无法将其移动到可排序对象中。

我找到了以下答案，但它是用于将可拖动项目拖动到可放置项目中......但我想将可拖动项目拖动到可排序项目中。我认为这就是他们的修复对我不起作用的原因。

jquery ui draggable elements not 'draggable' outside of scrolling div

我从上面的链接中得到了 appendTo 部分，但它不会放入可排序中。

有什么想法可以让这个工作吗？

【问题讨论】：

您需要将代码块缩进 4 个空格，以便将它们格式化为代码。

标签： jquery

【解决方案1】：

只需使用 appendTo 的可拖动方法如下：

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

这会将您的 div 添加到页面正文中，然后它不会保留在您的可拖动父区域中。并轻松移动页面上的任何位置。

或使用 helper 的可拖动方法如下：

$( ".selector" ).draggable({ helper: "clone" });

Visit the page for more

【讨论】：

【解决方案2】：

当点击可拖动项目时，尝试移除溢出的 css 属性。然后，当鼠标按钮被释放和/或拖动完成时恢复属性。您应该能够挂钩拖动开始和拖动结束事件：http://docs.jquery.com/UI/Draggable#events

【讨论】：