javascript - Make the collapsible sortable accordion sort in collapse shape - Stack Overflow

admin管理员组

文章数量:1313011

I have accordion is collapsible and sortable.

Look here full code in action /

And this the JS code I'm using

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

The only problem when I'm trying to sort the expanded div group is big and hard to sort and when its the first div and you drag it, you can't see below it because if the height size

See this image below is example of collapsed div, see how easy to use and you can see below it easily.

So what I need to reach is when the user trying to sort expanded div, the flying div turn into collapsed shape like this

And when he drop the element just turn back to expanded like normal

I have accordion is collapsible and sortable.

Look here full code in action http://jsfiddle/wvtPw/

And this the JS code I'm using

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

The only problem when I'm trying to sort the expanded div group is big and hard to sort and when its the first div and you drag it, you can't see below it because if the height size

See this image below is example of collapsed div, see how easy to use and you can see below it easily.

So what I need to reach is when the user trying to sort expanded div, the flying div turn into collapsed shape like this

And when he drop the element just turn back to expanded like normal

• javascript
• jquery
• css
• jquery-ui
• accordion

Share Improve this question Follow asked Aug 22, 2013 at 15:47 JimJim 1,44055 gold badges1818 silver badges4242 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 4

I remend doing the following:

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

DEMO: http://jsfiddle/m939m/2/

Please let me know if you have any questions! Cheers!

have a look at the documentation for sortable

look at the sortable event start( event, ui ). The logic would then check to see if the item is expanded. if so then close it. after sort expand it again

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

Add the code below before the stop event on your sortable object.

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

http://jsfiddle/wvtPw/8/

While this code works for the collapsing/expanding issue when sorting, the "activate"-function causes an issue regarding opening the first item in the accordion. Opening and closing the first item makes it impossible to reopen. Continuing with the next item, same thing happens. In the end the plete list of items will not be possible to expand.

Since this is more of a UX question, my suggestion is to offer a different UX. I would disable sorting by default and offer a button to toggle sorting on/off. When sorting is enabled, collapse all the fields and disable the accordion.

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

EDIT: (2018-06-18) I missed that this is jQuery UI. You probably want to use the enable/ disable features.

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

本文标签： javascriptMake the collapsible sortable accordion sort in collapse shapeStack Overflow