使用Bootstrap Tab导航组合JQuery UI可排序和可拖动

Question

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

但是,当我切换到引导程序选项卡导航时,外部项目上的删除消失但没有出现在选项卡列表中这是我的示例基于JQ UI"连接列表与选项卡"

这是我的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上搜索包含jQuery的解决方案的任何其他用户用于Draggable/Droppable项目的UI的API,与Bootstrap的选项卡式组件集成.

如果我正确地阅读您的问题,您希望能够将项目从外部列表拖动到两个选项卡中的任何一个.如果你的问题与我现在亲自处理的问题类似,你可能还想将标签中的项目拖到标签2中,反之亦然.我已经用适合这两种需求的解决方案更新了你的小提琴.这些列表也是可排序的,就像之前一样,并且也保留了从一个空间拖动到另一个空间的项目类.

我可能会考虑在将来添加的项目是:

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

但是,目前我所做的只是纠正你发布的解决方案.

更新的小提琴在这里: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

希望能为一些人解决这个问题!它肯定让我更接近解决我自己的用例,并且我可能会继续更新上面链接的小提琴,因为我添加了我之前提到的两个附加功能.