如何在拖放过程中不打扰父div

Question

我有一个为我构建字段布局的js。我试图在div之间拖放一个字段。

原始布局就像

span

将显示为

<div class="rowOfFields">
   <div class="field"> field_1 </div> <div class="field"> field_2 </div>
</div>
<div class="rowOfFields">
    <div class=field> field_3 </div> <div class=field>field_4</div> 
</div>

现在我正在尝试从另一个容器拖动一个div并将其放在Field 2和Field 4之间。但是发生了什么，Field 3和Field 4就像是，

Field_1 : [__________]    Field_2 : [___________]
Field_3 : [__________]    Field_4 : [___________]     //base structure
Field_5 : [__________]    Field_6 : [___________]

我希望Field_3保持在Drag_FLD的左侧，这样只有Field_4会像。

一样。

Field_1 : [__________]    Field_2 : [___________]

                          Drag_FLD: [-----------]   //Not preferred

Field_3 : [__________]    Field_4 : [___________]

Field_5 : [__________]    Field_6 : [___________]

我正在使用draggable来拖动Drag_FLD元素并将其连接到可以对类进行排序：＆＃34; field＆＃34;。我试图使用div结构实现ul li sortable。

如果我想说的话很难理解，请原谅我的解释，因为我是新手。

PS：由于第三方DOM构造函数将布局放置在DOM中，因此我只能将行调整范围而不是列。