Home/ Questions/Q 582547
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T14:41:54+00:00

When they are under eachother and I try to drag and drop items it’s

  • 0

When they are under eachother and I try to drag and drop items it’s no problem!

When I (with css) alter them so they appear next to eachother I can’t drag an item from the left box to the right… Maybe an options I’m missing I have to change? Can someone help me?

Here is my code:

<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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I managed to drag it to the right box. Strangely, you need to drag it to the TOP of the screen first, then to the right.

    I added borders to “item_1” and “group2” to see what was actually happening. The height of groups2 is only as high as the title since that DIV has no specified height, so there isn’t much area for you to drop into.

    I gave a height of 300px to group2 and can now drop there without issue.

    • 0