Question

我遇到了可排序列表的问题。所有列表都有几个可排序的子项。所有的孩子也应该是可以拖延的，这样我就可以将一个孩子从一个名单中删除到另一个名单。当我同时使用sortable和draggable时，它们会相互覆盖，其中一个被忽略。

现在我得到了以下jQuery代码。我还创建了一个说明我问题的jsFiddle。

// Set sortable to categories
$('.trade-in-template').sortable();
$('.trade-in-category-sub').sortable();
$('.trade-in-category-sub').children().draggable();

$( ".trade-in-category" ).droppable({
    drop: function( event, ui ) {
        var dragged = $(ui.draggable);
        var droppedOn = $(this);

        if (dragged.hasClass('trade-in-row'))
        {
            dragged.css('left', 0);
            dragged.css('top', 0);
            droppedOn.find('.trade-in-category-sub').append(dragged);
        }
    }
});

http://jsfiddle.net/a6Ftd/

Answer 1

显然，您的问题不是Javascript问题，而是CSS问题。

我updated your jsFiddle here。我已经注释掉了draggable和droppable声明，就像我说的那样，它有点多余。我已将connectWith声明中的规范替换为sortable。

但即便如此，它也行不通，因为你将你的.trade-in-row元素浮动到左边。

防止丢弃的原因是因为在CSS中浮动元素会将其从CSS框模型流（或布局，无论您想要调用它）中移除。因此，父.trade-in-category-sub元素会折叠为0px高度。在0px的高度，你没有空间可以“放弃”你的可排序。

为什么它适用于当前的可排序而不是连接的可排序可能是jQuery UI代码领域，特定于其实现。如果我弄错的话，有人可能想纠正我。

为了测试这一点，我在代码中添加了CSS样式，清楚地标记了相关元素的边界。

.trade-in-category-sub {
    border:1px solid red;
}

.trade-in-category-sub div {
    background:rgba(50,100,255,.5) !important;
}

我还删除了你的花车：

.trade-in-row {
    width: 95%;
    padding: 10px 0px 10px 5%;
    border-bottom: 1px solid #CCC;
    border-left: 1px solid #CCC;
    /*float:left;*/    /* ### <------------------------------------- */
    cursor: -webkit-grab;
}

只是取消注释，看看我的意思。：）

Answer 2

我想你可以在这里使用nestedSortable。

注意：虽然它似乎不再维护，但我们已经使用它1年了，事实证明它运作良好。配置选项与sortable和draggable非常相似。

可拖动和可排序的元素jquery

2 个答案: