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

Question

我有一个设置了高度/宽度的可拖动 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 可拖动元素在滚动 div 之外不可“拖动”

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

任何想法如何让这个工作？

Answer 1

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

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

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

或使用可拖动的辅助方法，如下所示：

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

访问页面了解更多