JQuery UI перетаскиваемая-сортировка не работает внутри вкладки первоначально неактивной (JQuery UI вкладки)

Question

я занимаюсь разработкой интерфейса перетащить и падение с помощью JQuery-UI Draggable + JQuery-UI Сортируемого внутри JQuery -ui Вкладки

вот HTML код:

<div id="tabs"> 
<ul> 
    <li><a href="#tabs-1">One</a></li> 
    <li><a href="#tabs-2">Two</a></li> 
    <li><a href="#tabs-3">Three</a></li> 
</ul> 
<div id="tabs-1"> 
    One 
</div> 
<div id="tabs-2"> 
    Two 
</div> 
<div id="tabs-3"> 
    <!-- BEGIN: DRAG & DROP INTERFACE --> 
    <div class="toolbar"> 
     <div class="item"> 
      <div class="in"> 
       Satu 
      </div> 
     </div> 
     <div class="clear"></div> 
    </div> 

    <div class="sortable"> 
     <div class="target"> 
      <div class="clear"></div> 
     </div> 
    </div>   
    <!-- END: DRAG & DROP INTERFACE --> 
</div> 

А вот Javascript код:

jQuery(function() {  
    jQuery("#tabs").tabs({ selected: 0 }); 
    jQuery(".sortable .target").sortable({ 
     opacity: 0.5 
    });  
    jQuery(".sortable .item, .toolbar .item").disableSelection(); 
    jQuery(".toolbar .item").draggable({ 
     connectToSortable: ".sortable .target", 
     helper: "clone", 
     revert: "invalid" 
    }); 
});

(вы можете увидеть весь код здесь: http://jsfiddle.net/dwiash/CWhFe/)

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

Может ли кто-нибудь помочь мне исправить эту проблему?

ТНХ :)

Answer 1

Дождитесь вкладками щелкнули, чтобы активировать вашу перетаскиваемую/сортировку. Так, дайте tab-3 ссылку идентификатор:

<li><a href="#tabs-3" id="tab3">Three</a></li> 

, а затем измените ваш Jquery, чтобы активировать ваш перетаскиваемым/сортировкой по щелчку:

jQuery(function() { 

    jQuery("#tabs").tabs({ selected: 0 }); 

    $('#tab3').click(function() { 
     jQuery(".sortable .target").sortable({ 
      opacity: 0.5 
     }); 

     jQuery(".sortable .item, .toolbar .item").disableSelection(); 

     jQuery(".toolbar .item").draggable({ 
      connectToSortable: ".sortable .target", 
      helper: "clone", 
      revert: "invalid" 
     }); 
    }); 
}); 

Answer 2

Вы можете использовать tabsshow событие на вкладки, чтобы привязать drag'n'drop материал, http://jsfiddle.net/kMZPR/1/:

function initDnD(event, ui) { 
    if(ui.index != 2) 
     return; 
    jQuery(".sortable .target").sortable({ opacity: 0.5 }); 
    jQuery(".sortable .item, .toolbar .item").disableSelection(); 
    jQuery(".toolbar .item").draggable({ 
     connectToSortable: ".sortable .target", 
     helper: "clone", 
     revert: "invalid" 
    }); 
    jQuery('#tabs').unbind('tabsshow', initDnD); 
} 

jQuery(function() { 
    jQuery("#tabs").tabs({ selected: 0 }).bind('tabsshow', initDnD); 
}); 

Обратите внимание, что это развязывает событие, как только он сделал свою работу, нет необходимости продолжать называть это снова и снова; это также почему обработчик события tabsshow находится в отдельной именованной функции BTW.

Кроме того, похоже, что вкладки jQuery-UI не вызывают обработчики событий tabsshow для первоначально выбранной вкладки. Если вы хотите вкладку «Три», выбранную изначально, то это выглядит, как вы лучше делать это вручную, а не через опцию:

jQuery("#tabs").tabs().bind('tabsshow', initDnD); 
jQuery("#tabs").tabs('select', 2); // Ensure that the event gets triggered 

Вы не делаете ничего подобного в вашем примере, просто что-то что вам следует знать.

Это довольно распространенная техника, когда вы имеете дело с вещами, которые должны быть полностью реализованы/видимы/расположены, прежде чем они смогут добавить дополнительную функциональность.

Answer 3

Я знаю, что я пару месяцев поздно, но я только что столкнулись с этой проблемой .. Помимо этого поста, я также нашел jqueryui ticket во время поиска в Интернете ...

В билет на работы- около:

$(".draggable-class-name").draggable({ 
    connectToSortable: ".sortable-class-name", 
    // other options here 
    start: function(event, ui) { 
     $(".sortable-class-name").sortable("refresh"); 
    } 
}); 

Работа вокруг, кажется, работает нормально.Это должно помочь немного, по крайней мере, пока команда jqueryui не решит ее.

Надеюсь, что это полезно