0

我遇到了可排序列表的问题。所有列表都有几个可排序的孩子。所有孩子也应该是可拖动的，以便我可以将一个孩子从一个列表拖放到另一个列表。当我同时使用可排序和可拖动时，它们会相互覆盖，其中一个会被忽略。

现在我得到了以下 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/

4

2 回答 2

2

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

我在这里更新了你的 jsFiddle。正如我所说，我已经注释掉了你的draggable和声明，这有点多余。droppable我已将其替换connectWith为sortable声明中的规范。

但即便如此，它也不起作用，因为您将元素浮动.trade-in-row到 left。

阻止丢弃的原因是因为在 CSS 中浮动元素会将其从 CSS 盒模型流（或布局，无论您想如何称呼它）中删除。结果，父.trade-in-category-sub元素折叠到0pxheight。在 0px 的高度，没有空间让你“放下”你的 sortables。

为什么它适用于当前可排序而不适用于连接的可排序可能已经是 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;
}

只需取消注释即可了解我的意思。:)

于 2013-06-12T12:54:45.563 回答
0

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

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

于 2013-06-12T12:09:34.413 回答