Hi, I have two div's.
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>