jQuery 可排序的重新排序答案

【问题标题】：jQuery sortable reorderjQuery 可排序的重新排序
【发布时间】：2012-11-20 17:30:05
【问题描述】：

我有一些结构：

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”。或在“This is sortable 2”之后排序“This is sortable 5”。

我的代码（fiddle）：

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

【问题讨论】：

标签： jquery jquery-ui drag-and-drop jquery-ui-sortable

【解决方案1】：

这是bug #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;
}

你会发现一个更新的小提琴here。

【讨论】：