可在不同标签上触发的事件不能触发

Question

当我尝试连接2个由标签分隔的列表时，第二个标签上的列表中不会触发over事件。

这里是我的HTML

<div id="TabSet" class="tabs"> 
    <ul> 
     <li class="tab"><a href="#tabs-1">Nunc tincidunt</a></li> 
     <li class="tab"><a href="#tabs-2">Proin dolor</a></li> 
    </ul> 
    <div id="tabs-1"> 
     <div style="padding: 10px;"> 
      <ul class="list" id="list1"> 
       <li class="ui-state-default">Item 1</li> 
       <li class="ui-state-default">Item 2</li> 
      </ul> 
      <ul class="list" id="list2"> 
       <li class="ui-state-default">Item 1</li> 
       <li class="ui-state-default">Item 2</li> 
      </ul> 
      <br style="clear: both;" /> 
     </div> 
    </div> 
    <div id="tabs-2"> 
     <div style="padding: 10px;"> 
      <ul class="list" id="list3"> 
       <li class="ui-state-default">Item 1</li> 
       <li class="ui-state-default">Item 2</li> 
      </ul> 
      <ul class="list" id="list4"> 
       <li class="ui-state-default">Item 1</li> 
       <li class="ui-state-default">Item 2</li> 
      </ul> 
      <br style="clear: both;" /> 
     </div> 
    </div> 
</div> 

和JavaScript

$(function() { 
    $(".list").sortable({ 
     connectWith: ".list" 
    }).disableSelection(); 

    var $tabs = $(".tabs").tabs(); 

    //for changing tab on over 
    $(".tab").droppable({ 
     over: function(event, ui) { 
      var $item = $(this); 
      $tabs.tabs("select", $item.find("a").attr("href")); 
     } 
    }); 

    $(".list").droppable({ 
     over: function(event, ui) { 
      var $item = $(this); 
      $item.addClass('ui-state-highlight'); 
      console.log($item.closest('ul').attr('id')); 
     }, 
     out: function(event, ui) { 
      var $item = $(this); 
      $item.removeClass('ui-state-highlight'); 
      ui.draggable.appendTo('#TabSet').show('slow'); 
     } 
    }); 
}); 

我已经创建了jsfiddle工作的例子。

在第一个选项卡上的列表中拖动项目时，列表将突出显示，但第二个选项卡上不是这种情况。 更令人感到奇怪的是，当我打印悬停列表的ID时，我从第一个选项卡而不是第二个选项卡获取ID。

任何想法如何解决这个问题？

Answer 1

在摆弄了好几天之后，最终在这里问我找到了解决我自己问题的方案。 在此发布以帮助其他用户。

诀窍是不使用droppable，但使用sortable提供的事件。

我之前尝试过这样做，但切换标签时帮助器会丢失，解决方案是使用appendto并设置助手进行克隆。 它并没有真正克隆，但它是一个无证的功能。

的HTML

<div id="TabSet" class="tabs"> 
    <ul> 
     <li class="tab"><a href="#tabs-1">Nunc tincidunt</a></li> 
     <li class="tab"><a href="#tabs-2">Proin dolor</a></li> 
    </ul> 
    <div id="tabs-1"> 
     <div style="padding: 10px;"> 
      <ul class="list" id="list1"> 
       <li class="ui-state-default">Item 1</li> 
       <li class="ui-state-default">Item 2</li> 
      </ul> 
      <ul class="list" id="list2"> 
       <li class="ui-state-default">Item 1</li> 
       <li class="ui-state-default">Item 2</li> 
      </ul> 
      <br style="clear: both;" /> 
     </div> 
    </div> 
    <div id="tabs-2"> 
     <div style="padding: 10px;"> 
      <ul class="list" id="list3"> 
       <li class="ui-state-default">Item 1</li> 
       <li class="ui-state-default">Item 2</li> 
      </ul> 
      <ul class="list" id="list4"> 
       <li class="ui-state-default">Item 1</li> 
       <li class="ui-state-default">Item 2</li> 
      </ul> 
      <br style="clear: both;" /> 
     </div> 
    </div> 
</div> 

和JavaScript

$(function() { 

    $(".list").sortable({ 
     connectWith: ".list", 
     appendTo: document.body, 
     helper: 'clone', 
     over: function(event, ui) { 
      var $item = $(this); 
      $item.addClass('ui-state-highlight'); 
     }, 
     out: function(event, ui) { 
      var $item = $(this); 
      $item.removeClass('ui-state-highlight'); 
     } 
    }).disableSelection(); 

    //for changing tab on over 
    $(".tab").droppable({ 
     over: function(event, ui) { 
      var $item = $(this); 
      $tabs.tabs("select", $item.find("a").attr("href")); 
     } 
    }); 

    var $tabs = $(".tabs").tabs(); 
}); 

上jsfiddle工作的例子。

编辑 发现我前面的例子没有用嵌套标签的工作，解决这对标签连接进行排序，并且防止标签拖放标签上。

工作示例jsfiddle上的嵌套选项卡。