jqueryui。“使用困难”；“可拖动的”&引用；可排序的“；，及；“标签”；在一起

我从这个拖放示例开始

但是，当我尝试在选项卡中放置放置放置区域（）时，它似乎中断了。当我尝试在“可排序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>

---

看来jQuery1.4和/或jQueryUI1.8有问题。如果你玩这个：

使用jQuery1.4.4和UI1.8.7，您将看到与您所看到的相同的奇怪行为（即在切换选项卡后必须与可排序表交互，然后才能再次拖放）。但如果切换到jQuery 1.7.1和UI 1.8.16：

一切似乎都很好。因此，升级您的解决方案

---

我还将draggable切换为

，以避免生成无效的HTML，但这不会影响奇怪的行为。我还将您的

id=“draggable”

替换为

class=“draggable”

以避免无效的HTML，但这也不会影响错误行为。

beauty！我想这会是一个艰难的时刻。谢谢

$("#tabs").tabs();

$("#tabs-1, #tabs-2").sortable({
  revert: true
});
$("#draggable").draggable({
  connectToSortable: '#tabs-1, #tabs-2',
  helper: 'clone',
  revert: 'invalid'
});
$("ul, li").disableSelection();