javascript - 拖放到右侧(或左侧)的 <div>？

Question

当它们位于彼此下方并且我尝试拖放项目时，这没有问题!

当我(使用CSS)更改它们以使它们彼此相邻时，我无法将项目从左侧框拖到右侧...也许我缺少一个选项，我必须更改？有人可以帮助我吗？

这是我的代码:

<script language="JavaScript">
sections = ['group1','group2'];
function createLineItemSortables() {
    for(var i = 0; i < sections.length; i++) {
        Sortable.create(sections[i],{tag:'div',dropOnEmpty: true, containment: sections,only:'lineitem'});
    }
}
function destroyLineItemSortables() {
    for(var i = 0; i < sections.length; i++) {
        Sortable.destroy(sections[i]);
    }
}
 </script>
<div id="group1" class="section" style="width:400px; float:left;">
<h3 class="handle">ZOEK NAVIGATIE: </h3>
<div id="item_1" class="lineitem">This is item 1</div>
        <div class="lineitem" id="te_926130" style="border:solid black 1px;">
            ITEM 1
        </div>
        <div class="lineitem" id="te_926121" style="border:solid black 1px;">
            ITEM 2
        </div>
        <div class="lineitem" id="te_926120" style="border:solid black 1px;">
            ITEM 3
        </div>
</div><!-- einde GROEP 1 -->
<div id="group2" class="section" style="width:400px; float:left; margin-left:20px;">
    <h3 class="handle">TEASER VERSCHIJNT OP VOLGENDE NAVIGATIES</h3>
</div>
<script type="text/javascript">
    Sortable.create('group1',{tag:'div',dropOnEmpty: true, containment:     sections,only:'lineitem'});
    Sortable.create('group2',{tag:'div',dropOnEmpty: true, containment:     sections,only:'lineitem'});
    Sortable.create('dioContentHome',{tag:'div',only:'section',handle:'handle'});
 </script>

Answer 1

我设法将其拖到右侧的框中。奇怪的是，您需要先将其拖到屏幕顶部，然后再拖到右侧。

我向“item_1”和“group2”添加了边框，以查看实际发生的情况。 groups2 的高度仅与标题一样高，因为该 DIV 没有指定高度，因此没有太多区域可供您放入。

我给 group2 的高度为 300px，现在可以毫无问题地放置在那里。