I started out with this working drag and drop example here.
It works great however when I try to place the drop regions within tabs(Here) it seem to break. It stops working when I try to drop an item on the "sortable 2" tab.
Hope this makes sense.
The HTML looks like this:
<ul>
<li id="draggable" class="ui-state-highlight">Drag me down</li>
</ul>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Sortable 1</a></li>
<li><a href="#tabs-2">Sortable 2</a></li>
</ul>
<div id="tabs-1">
<div class="ui-state-default">Item 13</div>
<div class="ui-state-default">Item 23</div>
<div class="ui-state-default">Item 3</div>
<div class="ui-state-default">Item 4</div>
</div>
<div id="tabs-2">
<div class="ui-state-default">Item 1</div>
<div class="ui-state-default">Item 2</div>
<div class="ui-state-default">Item 3</div>
<div class="ui-state-default">Item 4</div>
</div>
</div>
and the JavaScript:
$("#tabs").tabs();
$("#tabs-1, #tabs-2").sortable({
revert: true
});
$("#draggable").draggable({
connectToSortable: '#tabs-1, #tabs-2',
helper: 'clone',
revert: 'invalid'
});
$("ul, li").disableSelection();
