将可排序和可拖动的 JQuery UI 与 Bootstrap 选项卡导航相结合

Question

我尝试使用 JQuery UI 可排序列表基于 Bootstrap 构建页面。 我在全局空间中有一个列表，在选项卡中有两个列表 我喜欢从外部列表中拖动项目并将其拖放到选项卡导航以添加到列表中

但是，当我切换到引导选项卡导航时，放置的外部项目会消失，但不会出现在选项卡列表中 这是我基于 JQ UI “Connect list with Tab”的示例

This is my JS FIDDLE

$(function() {
    $( "#sortable0, #sortable1, #sortable2" ).sortable().disableSelection();

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

    $('#myTab a:last').tab('show');

    var $tab_items = $( "ul:first li", $tabs ).droppable({
      accept: ".connectedSortable li",
      hoverClass: "ui-state-hover",
      drop: function( event, ui ) {
        var $item = $( this );
        var $list = $( $item.find( "a" ).attr( "href" ) )
          .find( ".connectedSortable" );

        ui.draggable.hide( "slow", function() {
          $tabs.tabs( "option", "active", $tab_items.index( $item ) );
          $( this ).appendTo( $list ).show( "slow" );
        });
      }
    });
  });

HTML

<div id="external-tab">
    <ul id="sortable0" class="connectedSortable ui-helper-reset">
      <li class="ui-state-default">ExItem 1</li>
      <li class="ui-state-default">ExItem 2</li>
      <li class="ui-state-default">ExItem 3</li>
    </ul>
  </div>

<div id="tabs" class="tabbable">
  <ul id="myTab" class="nav nav-tabs">
    <li><a href="#tabs-1" data-toggle="tab">Nunc tincidunt</a></li>
    <li><a href="#tabs-2" data-toggle="tab">Proin dolor</a></li>
  </ul>
  <div class="tab-content">
      <div id="tabs-1" class="tab-pane">
        <ul id="sortable1" class="connectedSortable ui-helper-reset">
          <li class="ui-state-default">Item 1</li>
          <li class="ui-state-default">Item 2</li>
          <li class="ui-state-default">Item 3</li>
        </ul>
      </div>
      <div id="tabs-2" class="tab-pane">
        <ul id="sortable2" class="connectedSortable ui-helper-reset">
          <li class="ui-state-highlight">Item 1</li>
          <li class="ui-state-highlight">Item 2</li>
          <li class="ui-state-highlight">Item 3</li>
        </ul>
      </div>
    </div>
</div>

Answer 1

很遗憾在过去的一年里没有其他人回答您的问题...我猜这与您个人不再相关，但也许我们可以帮助任何其他在 Google 上搜索解决方案的用户解决此问题包括用于 Draggable/Droppable 项的 jQuery UI 的 API，与 Bootstrap 的选项卡式组件集成。

如果我没有正确阅读您的问题，您希望能够将项目从外部列表拖到两个选项卡中的任何一个。如果您的问题与我目前正在处理的问题相似，您可能还希望将项目从选项卡一拖到选项卡二，反之亦然。我已经用满足这两种需求的解决方案更新了您的小提琴。列表也是可排序的，就像以前一样，从一个空间拖到另一个空间的项目类别也被保留。

我以后可能考虑添加的项目是：

• 不仅可以拖动到选项卡上，还可以拖动到其下方的空间
• 从拖动的父元素添加所有属性，而不仅仅是类列表

但是，目前，我所做的只是纠正您发布的解决方案。

更新的小提琴在这里：http://jsfiddle.net/cr8s/96dsB/30/

另外，由于互联网是一个善变的地方，事情总是消失，这里是更新的 JS（我没有改变你的 HTML，这已经在上面的问题中了）：

$(function() {
  $('.tab-pane > ul').sortable().disableSelection();

  var 
    $tabs     = $('#tabs'),
    $tabItems = $('#myTab > li', $tabs);

  $('#myTab a:last').tab('show');
  $tabItems.droppable({
    accept: ".connectedSortable li",
    hoverClass: "ui-state-hover",
    drop: function(event, ui) {
      var 
        $item = $(this),
        href  = $item.children('a').attr('href'),
        $list = $(href).find('.connectedSortable');
      console.log($list);
      $list.append($('<li />').html(ui.draggable.html()).attr('class', ui.draggable.attr('class')));
      $list.closest('.tab-pane').addClass('active').siblings().removeClass('active');
      $item.addClass('active').siblings().removeClass('active');
    }// drop(event, ui)
  });// $tabItems.droppable()
  $('#external-tab > ul > li').draggable({
    appendTo: 'body',
    helper: 'clone'
  });
});// end of doc ready

希望能为某些人解决这个问题！它确实让我更接近于解决我自己的用例，而且我可能会继续更新上面链接的小提琴，因为我添加了我之前提到的两个额外的功能。