Model and DOM get sometimes out of sync when using nested connected lists

[jhyoty]

There is a problem when using sortable with nested connected lists. (Example: http://codepen.io/anon/pen/zLBvq). This seem to happen when a child element in a nested list is dragged outside of the outer container so that there is no placeholder position update. The dragged element is moved to the top of the outer container in the model (and DOM) and the nested list's DOM is restored to the original contents (thus showing the element although it is not in the model).

It seems that in the problem case there is only one one update event and the model and DOM get out of sync. I was able to work around the problem by canceling the sort in the remove callback if the first update is missing.

callbacks.remove = function(e, ui) {
  //Workaround for a problem observed in nested connected lists.
  //There should be an 'update' event before remove when moving
  //elements. If the event did not fire, cancel sorting.
  if (angular.isUndefined(ui.item.sortable.dropindex)) {
    element.sortable('cancel');
    ui.item.sortable.cancel();
  }
 // --- end of workaround ---

  // Remove the item from this list's model and copy data into item,
  // so the next list can retrive it
  if (!ui.item.sortable.isCanceled()) {
   scope.$apply(function() {
   ui.item.sortable.moved = ngModel.$modelValue.splice(
   ui.item.sortable.index, 1)[0];
  });
 }
};

[thgreasi]

Sorry for making you wait that long. Was busy + released v0.12.7. I will progress the research on this issue from Monday on.

[jhyoty]

Thanks. I know that we are pushing ui-sortable a bit by using it with nested connected lists (as a tree), but so far it has been quite ok. This might also be a jqueryui sortable problem/limitation (haven't looked into that), but the above solution has worked for us.

[thgreasi]

I'm currently writing some tests for this issue so we can integrate your solution and be sure about future regressions.
Have you found a case where, if element.sortable('cancel'); is removed from the workaround, unexpected behavior shows up?

[jhyoty]

That line is there "just in case" because that call would have been done in "update" (normal situation). Probably just calling ui.item.sortable.cancel() is enough but I have not tested that.

[thgreasi]

It seems that the floats make it easier to reproduce this issue.
I will open a PR tonight (here in Greece).

[thgreasi]

Just created PR #199

[jhyoty]

I can confirm that the fix #199 works for us.