0

我有以下标记，我试图在其上启用 jquery 可排序：

<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

4

2 回答 2

0

我认为您需要澄清 #sortable div 的 css（此示例假设您将 item 1 和 item 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; }

​</p>

这个例子似乎正在工作......

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

于 2012-06-19T16:28:03.290 回答
0

尝试放入overflow:hidden;你的 div

于 2014-09-17T18:03:59.933 回答