AngularJS sortable in multiple columns

Question

I'm trying to find the best way to do something like JQuery sortable in Angular JS. I know there is sortbale directive in angular-ui, but what I need is to be able to drag and drop items in multiple columns.

In JQuery this is done by $(el).sortable({connectWith: '.column'});

Is there a way to do that in Angular? As Angular newbie I don't want to play with JQuery sortable, as I know it doesn't fit Angular model well (DOM is manipulated in jQuery, outside Angular context, so it's tricky to have it synchronized).

Felix · Accepted Answer · 2012-11-30 21:39:02Z

1

Are you just looking for the orderBy filter?

answered Nov 30, 2012 at 21:39

Felix

6892 gold badges10 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Camilo Andrés Rosero · Accepted Answer · 2013-11-13 17:15:42Z

0

You need to include:

JQuery
JQueryUI
Angular

You need to create a directive:

directives.directive('sortable', function() {
    return {
        restrict: 'A',
        link: function(scope, element) {
            element.sortable({
                connectWith: ".column",
                start: function(event, ui) {},
                stop: function(event, ui) {},
                receive: function(event, ui) {}
            });
        }
    };
});

You need to apply the directive:

<div class="column" sortable></div>

In the example above the sortable can connect with the class column.

answered Nov 13, 2013 at 17:15

Camilo Andrés Rosero

1

Collectives™ on Stack Overflow

AngularJS sortable in multiple columns

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related