How can I create a sortable accordion with AngularJS?

问题

I found ui sortable and got it working nicely for simple lists and the like. My application already uses the ui-bootstrap and I want to sort the accordion elements.

The html looks nice:

<div ng:controller="controller">
    <accordion ui:sortable ng:model="list">
        <accordion-group ng:repeat="item in list" class="item">
            <accordion-heading>{{item}}</accordion-heading>
        </accordion-group>
    </accordion>
</div>

However, while this works with the accordion bits swapped for ul/li etc. it does not work for the accordion element. Here is the non working fiddle. The drag action just picks up the entire accordion.

Is this a bug or am I doing something wrong?

回答1:

I was going suggest using a handle in the sort options, but it doesn't seem to help.

$scope.sortableOptions = {
    handle: '.handle'
}

Here's a Plunkr

I'm gonna say the 2 just don't play well together.

You may have better luck with something like http://jimliu.github.io/angular-ui-tree/

回答2:

I've came across this trouble. I've solved using a $decorator, which is very useful to edit third-party libraries without touching the core. The exactly code is:

yourModule.config(['$provide', function ($provide){
    $provide.decorator('accordionDirective', function($delegate) { 
        var directive = $delegate[0];
        directive.replace = true;
        return $delegate;
    });
}]);

What the code does is replace the template that the accordion directive is wrapping, so now the ng-repeat is a direct child of the ui-sortable directive, and it should work.

Also, as @Dylan says, I suggest to use a "handler" to prevent the accordion from opening when sorting.

来源：https://stackoverflow.com/questions/26520131/how-can-i-create-a-sortable-accordion-with-angularjs