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中设置“overflow：auto”给可拖动列表滚动。当我拖动LI时，它包含在溢出中，所以我实际上无法将其移动到可排序的。

我找到了以下答案，但它是将可拖动项目拖动到可放置项目中...但我想将可拖动项目拖动到可排序项目中。我认为这就是为什么他们的修复不适合我。

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

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

我有什么想法可以让它发挥作用吗？

Answer 1

只需使用draggable的 appendTo 方法，如下所示：

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

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

或使用 helper draggable方法，如下所示：

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

Visit the page for more

Answer 2

单击可拖动项目时，请尝试删除overflow css属性。然后，当释放鼠标按钮和/或拖动完成后，恢复属性。您应该可以挂钩拖动开始并拖动结束事件：http://docs.jquery.com/UI/Draggable#events

JQuery在溢出中可拖动：auto div被限制在div中

2 个答案: