Jquery-ui。使用“可拖动”、“可排序”和“选项卡”时遇到问题一起

Question

我从此处这个有效的拖放示例开始。

然而，当我尝试将放置区域放置在选项卡中时，它效果很好（此处）它似乎打破了。当我尝试将项目放在“sortable 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();

Answer 1

看起来 jQuery 1.4 和/或 jQuery-UI 1.8 有问题。如果你玩这个：

http://jsfiddle.net/ambigously/jjmVt/

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

http://jsfiddle.net/ambigously/NRZ2U/

一切似乎都工作正常。所以升级你的方法来解决这个问题。

我还将可拖动对象切换为

以避免生成无效的 HTML，但这不会影响奇怪的行为。我还用 class="draggable" 替换了您的 id="draggable" ，再次避免无效的 HTML，但这也不会影响错误行为。