我从这里的拖放示例开始。
它很好用,但是当我尝试将放置区域放置在选项卡(此处)中时,它似乎中断了。当我尝试将项目放在“可排序 2”选项卡上时,它停止工作。
希望这是有道理的。
HTML 如下所示:
<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>
和 JavaScript:
$("#tabs").tabs();
$("#tabs-1, #tabs-2").sortable({
revert: true
});
$("#draggable").draggable({
connectToSortable: '#tabs-1, #tabs-2',
helper: 'clone',
revert: 'invalid'
});
$("ul, li").disableSelection();