Provide multiple element sorting in UI-Sortable

Simple Demo pen with selection count

Simple Demo pen

Connected Lists Demo pen

Handle Demo pen

MultiSelect on Click Demo pen

For better touch device support, use the option 'multiSelectOnClick'. This will allow click/tap to select and deselect individual items instead of requiring a modifier key to be held down.

Example usage:

// set the sortable options
$scope.sortableOptions = uiSortableMultiSelectionMethods.extendOptions({
  'multiSelectOnClick': true,
  start: function() {
    // ...
  },
  stop: function() {
    // ...
  }
});

<ul class="sortable-list" ui-sortable="sortableOptions" ng-model="items">
  <li ng-repeat="item in items" class="sortable-item" ui-sortable-selectable>
    <div class="sortable-item__inner">{item.name}</div>
  </li>
</ul>

The ui argument of the available callbacks gets enriched with some extra properties as specified below:

Type: Array<Integer>
Holds the original indexes of the items dragged.

Type: Array<Object> /undefined
Holds the JavaScript objects that is used as the model of the dragged items, as specified by the ng-repeat of the source ui-sortable element and the ui.item.sortableMultiSelect.selectedIndexes property.

Type: Array<Integer>
Holds the original indexes of the sibling items dragged.

Type: Array<Object>
Holds the JavaScript objects that is used as the model of the siblings of the dragged item, as specified by the ng-repeat of the source ui-sortable element and the ui.item.sortableMultiSelect.indexes property.

Type: Object /undefined
Holds the models of the dragged sibling items only when a sorting happens between two connected ui-sortable elements.

Type: jQuery
Holds the ui-sortable element that the dragged item originated from.