1

テストコード - http://jsfiddle.net/reGb3/

あるリストから別のリストにアイテムをドラッグしたいjQueryのソート可能なリストを使用しています。メイン カテゴリが展開されている場合は動作していますが (テスト コードを参照)、メイン リストが折りたたまれている場合、ドロップされたアイテムを取得して非表示のリストを正常に作成することはできません。メイン カテゴリのリスト アイテムを「ドロップ可能」にしてからリストを展開することで途中まで到達しましたが、その後、ドラッグ アンド ドロップ操作を再度行う必要があります。メインカテゴリを折りたたむ(推奨)か、追加の展開ステップを使用してこれを実現する方法はありますか?

HTML:

<ul data-role="listview" class="sortable-list" data-filter="true">

  <li data-role="collapsible" data-iconpos="right" data-inset="false">
    <h2 class="droppable"   id="cat1">EMPTY</h2>
    <ul data-role="listview" data-theme="b" class="sortable-list1" >

    </ul>
  </li>    
  <li data-role="collapsible" data-iconpos="right" data-inset="false" >
    <h2 class="droppable" id="cat2">Birds</h2>
    <ul data-role="listview" data-theme="b" class="sortable-list1">
      <li id="id1"><a href="#">Condor</a></li>
      <li id="id2"><a href="#">Eagle</a></li>
      <li id="id3"><a href="#">Sparrow</a></li>
    </ul>
  </li>
  <li data-role="collapsible" data-iconpos="right" data-inset="false" >
    <h2 class="droppable" id="cat3">Fish</h2>
    <ul data-role="listview" data-theme="b" class="sortable-list1">
      <li id="id4"><a href="#">Salmon</a></li>
      <li id="id5"><a href="#">Pollock</a></li>
      <li id="id6"><a href="#">Trout</a></li>
    </ul>
  </li>
</ul>

JavaScript:

$(document).ready(function() {
    $('.sortable-list').sortable({
      connectWith: '.sortable-list',
      dropOnEmpty: true,
      update: function(event, ui) {

      }
    });

    $(".droppable").droppable({
        drop: function( event, ui ) {           
            var collapsedList = $(this).parent() ;
            if ($(collapsedList).collapsible( "option", "collapsed" )){
                $(collapsedList).collapsible( "expand" );
            }
          }
    });

    var sortupdate = function (event, ui) {

    };

    $('.sortable-list1').on("sortupdate", sortupdate);
    $('.sortable-list1').sortable({
      connectWith: '.sortable-list1',
      dropOnEmpty: true      
    });
});

CSS:

.ui-listview>.ui-li-static, .ui-listview>.ui-li-divider, .ui-listview>li>a.ui-btn {
overflow: visible !important;
}

.sortable-list1 {
    min-height:50px;
    padding:10px
}

ありがとう!

4

1 に答える 1