I was able to come out with a solution. Here is the plunker <http://plnkr.co/edit/PUxYRaj9C2hnNzPPgLu3?p=preview>
Thanks On Thursday, February 27, 2014 10:29:57 AM UTC-5, Leonardo Lozano wrote: > > 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.
