Событие, отличное от события, не срабатывающего на разных вкладках.

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.

Когда вы перетаскиваете элемент в списках на первой вкладке, список подсвечивается, это не так на второй вкладке. Что еще более странно, так это то, что когда я печатаю идентификатор зависающих списков, я получаю идентификатор с первой вкладки, а не на вторую вкладку.

Любая идея, как решить эту проблему?

Answer 1

После того, как он работал в течение нескольких дней и, в конечном итоге, спросил здесь, я нашел решение своей проблемы. Публикуйте его здесь, чтобы помочь другим пользователям.

Хитрость заключается в том, чтобы не использовать droppable, но использовать события, предоставляемые сортировкой.

Я пробовал это раньше, но помощник теряется при переключении вкладок, решение этого - использовать 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.

EDIT Найдены, что мой предыдущий пример не работает с вложенными вкладками, решение это соединить язычки к сортировке и предотвращению перетаскивания вкладок и сбросив на вкладках.

Рабочие примеры вложенных вкладок на jsfiddle.