3

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

看这里完整的代码在行动http://jsfiddle.net/wvtPw/

这是我正在使用的 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 变成这样的折叠形状

在此处输入图像描述

而当他放下元素时，它会像平常一样变回扩展

4

5 回答 5

4

我建议执行以下操作：

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

演示：http: //jsfiddle.net/m939m/2/

请让我知道，如果你有任何问题！干杯!

于 2013-08-22T18:04:47.527 回答
0

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

于 2013-09-16T07:33:27.033 回答
0

查看可排序的文档

查看可排序的事件 start( event, ui )。然后该逻辑将检查该项目是否已展开。如果是这样，请关闭它。排序后再次展开

http://api.jqueryui.com/sortable/#event-start

于 2013-08-22T16:07:14.973 回答
0

stop在可排序对象的事件之前添加以下代码。

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

http://jsfiddle.net/wvtPw/8/

于 2013-08-22T16:42:36.537 回答
0

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

$( '.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）我错过了这是 jQuery UI。您可能想要使用启用/禁用功能。

$( '.accordion-toggle' ).on( 'click', function() {
  if ( $( '#accordion' ).hasClass( 'sorting' ) ) {
    $( '#accordion' ).removeClass( 'sorting' )
      .accordion( "enable" )
      .sortable( "disable" );
  } else {
    $( '#accordion' ).addClass( 'sorting' )
      .sortable( "enable" )
      .accordion( "disable" )
于 2018-06-18T19:21:47.953 回答