Is handling of moving an item through lists in angular -ui sorted?

Question

I am using angular -ui sortable version 1.2

I want to handle moving an item from one list to another and update it accordingly.

jquery-ui-sortable defines a bunch of events including receive event

Inside this event handler, I cannot find a way to access the moved element of the angular model and its new parent list.

See this codepen example . You can see that I can access the element through scope() in the update event, but not in the receive event.

Any suggestions on how to handle these moves? either through the receive event, or else?

Answer 1

Reorder items in a single list

The sortable UI is intuitive if you have one list of items and just want to reorder the list. In this case, you do the following if you have an array of objects in your controller as follows:

 $scope.yourObjects = [ {title:'Alabama'}, {title:'Ohio'}, {title:'Colorado'} ]; 

in your html you can create a list of these elements using ng-repeat :

 <ul ui-sortable="sortableOptionsA" class="list items-container" ng-model="yourObjects"> <li class="item sortable" ng-repeat="item in yourObjects">{{item.title}}</li> </ul> 

where sortableOptions :

 $scope.sortableOptionsA = { stop : function(e, ui) { var item = ui.item.scope().item; var fromIndex = ui.item.sortable.index; var toIndex = ui.item.sortable.dropindex; console.log('moved', item, fromIndex, toIndex); } }; 

As you can see, in the stop function we have access to all the necessary information, we must be informed about the movement.

Connect 2 item lists

Now the problem is getting a little complicated. UI Sortable does not give us any information about targets that we can use directly. If we move one item from one list to another list, the following events will be fired:

start: we have access to the element that will be moved, including the scope this element.

update: We have access to the item being moved, including the scope this item.

Now the item has been removed from its list of sources.

deleted: the item has been removed from the original list. scope no longer valid (e.g. undefined ).

received: the item will be deleted in the second list. scope is still undefined , we only have access to sender , for example. drag source

Now the item is inserted into the target list.

update : the item is discarded in the target list. but we do not have access to the scope element, and the target object does not exist in the event objects. JQuery UI Sortable did not provide this information, and the angular wrapper did not set the model target in any way: (

stop: If all steps of the drag'n'drop process are completed, a stop event is triggered. But we also do not have access to the scope target or the target list.

What can we do if we want to get information about the movement and which element was moved to which list?

The item that was moved is available in ui.item.sortable.moved in the stop event. This is our item that has been moved.

Which list is the drag target can be determined using the angular $watch function. We just listen to the changes in the lists and we know which list has been changed. One caveat: the source and destination list are changing, but the final list is changing last (see the above order of events). If we listen to the changes this way:

 $scope.dropTarget = null; $scope.$watchCollection('lists[0].items', function() { console.log('watch 0'); $scope.dropTarget = $scope.lists[0]; }); $scope.$watchCollection('lists[1].items', function() { console.log('watch 1'); $scope.dropTarget = $scope.lists[1]; }); 

We have all the information to find out which item was moved to which list and which from the index and index:

 stop:function(e, ui){ var item = ui.item.sortable.moved; var fromIndex = ui.item.sortable.index; var toIndex = ui.item.sortable.dropindex; console.log(item, fromIndex, toIndex, $scope.dropTarget); }, 

PLUNKR with lots of debugging code that shows what information is available during the drag'n'drop process.

Note: if you move one item from "Linked Lists" to "One Sortable List", the log output is erroneous - because there is no list of listeners in the "One Sortable List" list!