javascript - jQuery - 在 DIV/或可排序元素中拖动元素

Question

我在将一个 div 拖入另一个 div 元素时遇到问题。

HTML 看起来像这样:

<div id="grid">
    <div id="el1" style="width:300px"></div>
    <div id="el2" style="width:100px"></div>
    <div id="el3" style="width:100px"></div>
    <div id="el4" style="width:100px"></div>
</div>

所有元素都是可拖动的，并且具有 css 样式 float:left;position:relative;。 当我将 el1 拖到 el3 的位置时，它会起作用，但它当然会与元素 el3 重叠。 draggin jquery draggable 工作正常，但我想在此位置的 HTML 代码中插入 ID 为 el1 的 div。

它看起来像这样:

<div id...>
    <div id="el2...
    <div id="el3...
    <div id="el1...
    <div id="el4...
</div>

我现在的问题是，这是一个网格。 el1 的宽度为“300”，其他宽度均为“100”。将 el1 拖到 el3 的位置应该交换 el2、el3 和 el4 到el1 和 el1 到 el2, el3, el4 的位置。

要获得此行为，我认为我需要将 div HTML 代码移到 el4 之后。但是如何确定哪个元素是最近的呢？

-------- 已更新--------

我尝试使用 sortable... 参见此处 http://jsfiddle.net/vwK5e/2/ 但是，如果您将红色框放在数字 3 上，红色框将在第二行(正确)但数字 4 应该紧挨着数字 3，因为这是空白。

TIA frgtv10

Answer 1

引用http://jqueryui.com/demos/sortable/#display-grid

我猜你想要这样的功能。

回答

A different kind of jquery sortable