Question

我有以下标记，我试图启用jquery sortable：

<div>
    <div id="sortable">
        <div style="height:200px;width:400px;border:1px solid black;float:left;">Item 1</div>
        <div style="height:200px;width:400px;border:1px solid black;float:right;">Item 2</div>
    </div>
</div>

以下是我的javascript：

$(function () {
        $("#sortable").sortable({
            placeholder: "ui-state-highlight"
        });
        $("#sortable").disableSelection();
    });

如果我移除浮动并允许div堆叠，它可以正常工作。包含浮动和屏幕两侧各1个div，排序不起作用。事实上，在指定占位符样式的情况下，占位符似乎跨越了2个div所在的“行”的整个长度。

非常感谢任何帮助。

请参阅以下内容，了解无法使用的代表性示例：http://jsfiddle.net/5kx5C/2

Answer 1

我认为您需要澄清#sortable div的css（此示例假设您将项目1和项目2 div缩小为300 px宽度，您可能需要调整这些值以满足您的需求）

#sortable { width: 700px; height: 150px; padding: 0.5em; }

#item1 { width: 300px; height: 100px; border: 1px solid #444; }
#item2 { width: 300px; height: 100px; border: 1px solid #444; }

#sortable > div { float: left; }

这个例子似乎正在起作用......

http://jsfiddle.net/gefZm/5/

Answer 2

尝试将overflow:hidden;放入您的div

当div浮动时，jquery可排序给出问题

2 个答案: