1

JQuery UIのソート可能なリストを使用して、Bootstrapに基づいてページを構築してみます。グローバル スペースに 1 つのリストがあり、タブに 2 つのリストがあり、外部リストから項目をドラッグして、リストに追加するためにタブ ナビゲーションにドロップするのが好きです

ただし、ブートストラップ タブ ナビゲーションに切り替えると、ドロップ時の外部アイテムは消えますが、タブ リストには表示されません。これは、JQ UI の「Connect list with Tab」に基づく私の例です。

これは私の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>
4

1 に答える 1

6

過去 1 年間、誰もあなたの質問に答えられなかったのは残念です...これはもはやあなた個人には関係ないと思いますが、Google で jQuery を含むソリューションを探している他のユーザーのために、この問題を解決する手助けができるかもしれません。 Bootstrap のタブ付きコンポーネントと統合された、ドラッグ可能/ドロップ可能なアイテム用の UI の API。

私があなたの質問を正しく読んでいれば、項目を外部リストから 2 つのタブのいずれかにドラッグできるようにしてほしいと思います。あなたの問題が私が現在取り組んでいる問題と似ている場合は、項目をタブ 1 からタブ 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

一部の人々にとってこの問題が解決することを願っています! それは確かに私自身のユースケースの解決に近づきます。また、前述の 2 つのような追加機能を追加するにつれて、上記のリンク先のフィドルを更新し続ける可能性があります。

于 2015-05-07T16:42:53.493 に答える