如何将jQuery可排序项放入折叠列表中？

测试代码-

我正在使用jQuery可排序列表，我想将一个项目从一个列表拖到另一个列表。当主类别被展开时，我可以工作（请参阅测试代码），但是如果主列表被折叠，我就无法让被删除的项成功填充隐藏列表。通过将主要类别列表项设置为“可拖放”，然后扩展列表，我在某种程度上实现了这一点，但接下来我需要再次执行拖放操作。有没有办法在主类别折叠（首选）或额外的扩展步骤中实现这一点

HTML:

CSS:

---

谢谢

通常，只能通过

connectWith

选项将

sortable

小部件中的项目移动到另一个

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
              }
            }
});

---

国王，你真厉害！谢谢你的解决方案！

$(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      
    });
});

.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
}

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
              }
            }
});