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

1

通常，一个小部件中的一个项目sortable只能sortable通过该connectWith选项移动到另一个小部件。在这种情况下，您实际上将项目从sortable列表移动到普通标题（可放置）而不是可排序列表。所以你必须处理事件drop。看起来我们可以简单地将draggable项目（通过 访问ui.draggable）附加到与此事件处理程序中的可放置项目关联的列表中drop，但这并不是那么简单。这不是追加可拖动项的正确位置，因为之后的一些阶段可能会在放置目标不是有效的可排序列表时将可拖动项追加回原始列表，因此追加将失败。我认为我们必须找到一种解决方法。在里面drop事件处理程序，我们可以只保存对应附加可拖动项目的列表的引用。然后我们需要处理sortstop事件，检查对目标列表的引用是否有效（不为空），然后再将拖动的项目（可以通过 访问ui.item）附加到该列表。这是编辑后的代码：

var receiver;
$(".droppable").droppable({
    drop: function( event, ui ) {           
          var collapsedList = $(this).parent() ;
          if ($(collapsedList).collapsible( "option", "collapsed" )){
            $(collapsedList).collapsible( "expand" );
          }            
              //save the target list to receiver for later appending
              receiver = $(this).parent().find('.sortable-list1');
        }
});

$('.sortable-list1').sortable({
        connectWith: '.sortable-list1',
        dropOnEmpty: true,
        //handle the sortstop event
        stop: function(e,ui){
              //check if receiver is valid (not null)
              if(receiver){
                receiver.append(ui.item);
                receiver = null; //remember to reset it to null
              }
            }
});

演示。

于 2014-06-25T01:24:30.600 回答