Javascript 使可折叠排序的手风琴排序为折叠形状

我的手风琴是可折叠和可分类的

看这里，完整的代码正在运行

这就是我正在使用的JS代码

$( "#accordion" )
    .accordion({
        header: "> div > h3",
        collapsible: true
    })
    .sortable({
        handle: "h3",
        placeholder: "ui-state-highlight",
        stop: function( event, ui ) {
            // IE doesn't register the blur when sorting
            // so trigger focusout handlers to remove .ui-state-focus
            ui.item.children( "h3" ).triggerHandler( "focusout" );
        }
    });

当我试图对扩展的div组进行排序时，唯一的问题是它太大而且很难排序，当它是第一个div时，你拖动它，你看不到它下面，因为如果

请看下面这张图片是折叠div的示例，请看它的易用性以及下面的内容。

所以我需要了解的是，当用户尝试对扩展div进行排序时，飞行div会变成这样的折叠形状

---

当他删除元素时，只需返回到像普通一样展开的状态

请查看可排序的文档

查看可排序的事件开始（事件，ui）。然后，逻辑将检查该项是否已展开。如果是这样，那么关闭它。排序后再次展开它

---

在可排序对象上的

stop

事件之前添加以下代码

   over: function(event, ui) {
         $('#accordion').accordion({active:false});
    },

---

我建议您执行以下操作：

$(function() {
    var active = false,
        sorting = false;

    $( "#accordion" )
    .accordion({
        header: "> div > h3",
        collapsible: true,
        activate: function( event, ui){
            //this fixes any problems with sorting if panel was open 
            //remove to see what I am talking about
            if(sorting)
                $(this).sortable("refresh");   
        }
    })
    .sortable({
        handle: "h3",
        placeholder: "ui-state-highlight",
        start: function( event, ui ){
            //change bool to true
            sorting=true;

            //find what tab is open, false if none
            active = $(this).accordion( "option", "active" ); 

            //possibly change animation here (to make the animation instant if you like)
            $(this).accordion( "option", "animate", { easing: 'swing', duration: 0 } );

            //close tab
            $(this).accordion({ active:false });
        },
        stop: function( event, ui ) {
            ui.item.children( "h3" ).triggerHandler( "focusout" );

            //possibly change animation here; { } is default value
            $(this).accordion( "option", "animate", { } );

            //open previously active panel
            $(this).accordion( "option", "active", active );

            //change bool to false
            sorting=false;
        }
    });
});

演示：

---

如果您有任何问题，请告诉我！干杯

当此代码用于排序时的收拢/展开问题时，“激活”-功能会导致打开手风琴中第一个项目的问题。打开和关闭第一个项目使其无法重新打开。继续下一项，同样的事情也会发生。最后，完整的项目列表将无法扩展。

因为这更像是一个用户体验问题，我的建议是提供不同的用户体验。我会在默认情况下禁用排序，并提供一个按钮来打开/关闭排序。启用排序后，折叠所有字段并禁用手风琴

$( '.accordion-toggle' ).on('click', function() { 
    $( "#accordion" ).toggleClass( 'sorting' );
});
$( "#accordion:not(.sorting)" )
    .accordion({
        header: "> div > h3",
        collapsible: true
    });
$( "#accordion.sorting" )
    .sortable({
        handle: "h3",
        placeholder: "ui-state-highlight",
        stop: function( event, ui ) {
            // IE doesn't register the blur when sorting
            // so trigger focusout handlers to remove .ui-state-focus
            ui.item.children( "h3" ).triggerHandler( "focusout" );
        }
    });

编辑：（2018-06-18） 我没有注意到这是jQueryUI。您可能希望使用启用/禁用功能

$( '.accordion-toggle' ).on( 'click', function() {
  if ( $( '#accordion' ).hasClass( 'sorting' ) ) {
    $( '#accordion' ).removeClass( 'sorting' )
      .accordion( "enable" )
      .sortable( "disable" );
  } else {
    $( '#accordion' ).addClass( 'sorting' )
      .sortable( "enable" )
      .accordion( "disable" )

---

我以前尝试过这种方法，但问题是当你拖动折叠的div时，展开的一个折叠，当你放下div时，它不再展开。