How can this plug-in be incorporated with ui-sortable?

[bobs619]

Anyone try to integrate ui-sortable with this plug-in?

[raczynskil]

+1

[danahartweg]

Better late than never, I suppose, but I've just incorporated angular-vs-repeat in a couple of spots for our application that, you guessed it, need to be sorted. The following code has worked for me thus far (still has to run through our QA paces, but seems to work in all cases I tested it against thus far).

It's set to adapt to whatever model is actually on the element (so you don't have to manually couple it). It should be attached to your sortable options.

update: function(e, ui) {
  // if this sortable isn't virtualized, don't process
  if (!ui.item.hasClass('vs-repeat-repeated-element')) {
    return;
  }

  // if these are virtualized repeats, we need to manually
  // move the dropped model to compensate for the items
  // that are not actually rendered
  var repeatScope = ui.item.parent().scope();

  if (!repeatScope) {
    return;
  }

  var currentIndex    = ui.item.sortable.index - 1,
      actualIndex     = repeatScope.startIndex + currentIndex,
      actualDropIndex = repeatScope.startIndex + ui.item.sortable.dropindex - 1;

  // find the model to update
  var modelName   = angular.element(ui.item.parent()).data('ngModel').split('.'),
      actualModel = $scope;

  if (!modelName) {
    return;
  }

  // go through the split name to find the actual model
  for (var i = 0, length = modelName.length; i < length; i++) {
    actualModel = actualModel[modelName[i]];
  }

  if (!actualModel) {
    return;
  }


  // adjust the model accordingly
  actualModel.splice(actualDropIndex, 0, actualModel.splice(actualIndex, 1)[0]);

  // cancel the sort so ui-sortable doesn't try to kick in
  ui.item.sortable.cancel();
}

edit: updated to cancel the sort since we've taken care of it

[dominickciccone]

HI @danahartweg - It looks like it has been a while since this last comment, but we are experiencing the same issue. Did you need make any changes to the Sortable Directive at all to get past the Isolated Scope errors? Could you provide an example/screenshot of the HTML/Directive that you are using? Thanks!

[danahartweg]

@dominickciccone Sorry for the late reply, things have been crazy lately.

I didn't have to make any changes to the sortable directive to get things to work for me. If you're getting scope errors, it likely has to do with one of your other custom directives (which I'm sure you've figured out by now).

The html component (which has been generalized) looks like this:

<div vs-repeat
     vs-excess="5"
     ui:sortable="::optionSortSettings"
     ng-model="model">
  <div class="js-draggable"
       ng-repeat="item in model">
    ... interior content
  </div>
</div>

The optionSortSettings contain the update function mentioned above.

[dzek69]

@danahartweg where is the vs-repeat in your html?

[danahartweg]

@dzek69 Updated. Sorry for providing an unclear sample!

[dzek69]

Thanks for the update.

I tried it like this already and I'm getting error in the console:

angular.js:14199 Error: [$compile:multidir] Multiple directives [uiSortable, vsRepeat] asking for new/isolated scope on: <div vs-repeat="" class="sequences sequences-full-width tags-sequence" ui:sortable="sortableOptions">

I don't know how this works for you