jquery - jQuery 可排序的重新排序

Question

我有一些结构：

li#lists
--ul
----li.category

------ul.due
--------li.item

------ul.date
--------li.item

------ul.other
--------li.item
--------li.item
--------li.item

我需要在 ul.other 元素中对我的 li.item 元素进行排序。现在在某些类别中排序正在工作，但我需要将项目排序到另一个类别。

示例：我需要在“这是可排序的 5”之后排序“这是可排序的 2”。或在“这是可排序的 2”之后排序“这是可排序的 5”。

我的代码（小提琴）：

$('.category ul.other').sortable({
    items: "li",
    helper: "clone",
    cursor: "move",
    placeholder: "drag-to",
    opacity: 0.5,
    connectWith: ".category ul.other"
}).disableSelection();

Answer 1

这是错误 #4551。当扩充列表项浮动时，该connectWith选项显然无法按预期工作。

从以下规则中删除float: left;以牺牲项目布局为代价解决了您的问题（您可能希望指定一个固定宽度来补偿）：

#lists .due li,
#lists .date li,
#lists .other li,
#lists .title {
    float: left;  // <-- Remove this style.
    padding: 8px;
    margin-left: -9px;
    border: 1px solid #fff;
    border-radius: 2px;
    margin-top: 1px;
}

你会在这里找到一个更新的小提琴。