I'm experiencing a weird situation. I need to have two sortable lists that should interchange elements by drag-n-drop or Add/Remove events.
I created a directive that works well. Also the controller event do the right job. The problem begins when methods are combined (button Add + drag-n-drop + button Add again). KA-BOOM! I put together this plnkr: http://plnkr.co/edit/DumufP1kDdkz1INAXwmF?p=preview Click on the elements before click the button action (Add/Remove). Let me share some of the code of the directive just for fun but please visit the link to see the entire implementation. There is more information of how to reproduce the issue in the plnkr<http://plnkr.co/edit/DumufP1kDdkz1INAXwmF?p=preview> Help is appreciated. .directive('sortableList', function ($log) { return { restrict: 'A', scope: { fromList: '=', toList: '=' }, link: function (scope, elm, attrs) { var callback = { receive: function (event, ui) { //-- Get the scope of the list-item var scopeItem = ui.item.scope(); //-- Get new list index var newIdx = ui.item.index(); //-- Find position in the list var prevIdx = scope.fromList.indexOf(scopeItem.obj); //-- Remove from source list scope.fromList.splice(prevIdx, 1); //-- Add to target list if (newIdx >= scope.toList.length) { scope.toList.push(scopeItem.obj); } else { scope.toList.splice(newIdx, 0, scopeItem.obj); } //ui.item.removeClass('selectedSortListItem').addClass('sortListItem'); scope.$apply(); }, stop: function (event, ui) { //$log.log(ui); } }; //-- Apply jquery ui sortable plug-in to element elm.sortable({ handle: ".handle", connectWith: '.sortColumnsConnect', dropOnEmpty: true, cancel: ".ui-state-disabled", receive: callback.receive, stop: callback.stop }).disableSelection(); } }}) -- You received this message because you are subscribed to the Google Groups "AngularJS" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. Visit this group at http://groups.google.com/group/angular. For more options, visit https://groups.google.com/groups/opt_out.
