0

In Angular, I have multiple columns containing blocks. The columns are repeated with ngRepeat and also the blocks inside the columns are repeated. With Angular-UI and jQueryUI I made the blocks sortable and connected all columns. This works fine, I can drag blocks between columns, but only if I drag a block to the end of a non-empty column, this last (the new) block is not diplayed. However if you log the underlying array in the console, you can see that this array has updated to the blockmove. Also other watches are still called and display the correct value (as seen in the fiddle)

HTML:

<div ng-app="foo" ng-controller="bar">
    <div ng-repeat="column in columns" id="column-{{$index}}" class="column">
        <div class="blocks-wrapper" ui-sortable="columnSortableConfig" ng-model="column.blocks">
            <div ng-repeat="block in column.blocks" class="block" id="block-{{block.id}}">
                {{block.id}}
            </div>
        </div>
    </div>
    {{columns}}
</div>

Javascript:

foo = angular.module('foo', ['ui.sortable']);
foo.controller('bar', function($scope){
    $scope.columns = [{blocks: [{id: 1},{id: 2}]},{blocks: [{id: 3}]}];

    $scope.columnSortableConfig = {
        connectWith: '.blocks-wrapper',
        placeholder: 'block-placeholder',
        forcePlaceholderSize: true,
        tolerance: 'pointer',
    };
});

I searched around on the web, made the items in the array non-primitives (link) and wrapped the callbacks of jQuery in scope.$apply() (link) but it all didn't work.

JSFiddle: http://jsfiddle.net/C5pKc/10/ (To reproduce, drag block 3 under block 2)

Community
  • 1
  • 1
denniss17
  • 35
  • 1
  • 6
  • As an aside, Github doesn't want us hot linking raw source files so your fiddle is busted. Change your script include for ui-sortable to use this URL instead: https://rawgithub.com/angular-ui/ui-sortable/master/src/sortable.js – moribvndvs Feb 03 '14 at 21:02

1 Answers1

0

Are you using angular 1.2.x? If so, make sure you are using the angular1.2 branch of angular-ui/ui-sortable. Here is the source file.

The problem is described in this pull request. In short, angular uses html comments to track ng-repeat items. Jquery does not care about comments. So when you drag things between lists, the comments get messed up and ng-repeat gets confused. Hope this helps!

Jacob
  • 441
  • 3
  • 9
  • Thanks for the explanation. I already found it out myself and aswered this question, but somehow the answer was not correctly submitted. Anyways, clear explanation! – denniss17 Feb 05 '14 at 23:32