1

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

但是，当我切换到引导选项卡导航时，放置的外部项目消失但没有出现在选项卡列表中，这是我基于 JQ UI“连接列表与选项卡”的示例

这是我的 JS 小提琴

$(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>
4

1 回答 1

6

很遗憾在过去的一年里没有其他人回答您的问题...我猜这与您个人不再相关，但也许我们可以帮助任何其他在 Google 上搜索包含 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

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

于 2015-05-07T16:42:53.493 回答