Question

我开始使用这个工作拖放示例here。

然而，当我尝试将拖放区域放在标签（Here）中时，它看起来很好。当我尝试在“可排序的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/ambiguous/jjmVt/

使用jQuery 1.4.4和UI 1.8.7，你会看到你所看到的同样奇怪的行为（即你必须在切换标签之后与sortable交互，然后才能再次拖动' ）。但是如果你切换到jQuery 1.7.1和UI 1.8.16：

http://jsfiddle.net/ambiguous/NRZ2U/

一切似乎都很好。所以升级你的方法摆脱问题。

我还将draggable切换为<div>以避免产生无效的HTML，但这不会影响奇怪的行为。我还将id="draggable"替换为class="draggable"，再次避免使用无效的HTML，但这也不会影响错误行为。

jQuery的UI。麻烦使用“draggable”，“sortable”和“tabs”

1 个答案: