다른 탭에서 이벤트가 실행되지 않음

Question

탭으로 구분 된 두 개의 목록을 연결하려고하면 두 번째 탭의 목록에서 오버 이벤트가 실행되지 않습니다.

은 여기 내 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> 

내가 jsfiddle에 작업 예제를 만들었습니다

$(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'); 
     } 
    }); 
}); 

자바 스크립트입니다.

첫 번째 탭의 목록에서 항목을 끌면 목록이 강조 표시되고 두 번째 탭에서는 강조 표시되지 않습니다. 낯설게하는 점은 겹쳐진 목록의 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> 

그리고 자바 스크립트

$(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입니다.