拖放到<div>向右(或左)?</div>

时间:2010-01-27 14:28:05

标签: javascript drag-and-drop scriptaculous

当他们在彼此之下并且我尝试拖放物品时,这没问题!

当我(用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>

1 个答案:

答案 0 :(得分:3)

我设法将它拖到右边的框中。奇怪的是,你需要先将它拖到屏幕的顶部,然后再拖到右边。

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

我给group2提供了300px的高度,现在可以毫无问题地放在那里。