拖放至 <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的高度，現在可以放在那里了，沒有問題。