AngularJS sortable in multiple columns

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).

Are you just looking for the orderBy filter?

You need to include:

  1. JQuery
  2. JQueryUI
  3. 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.