ui-sortable-multiselection

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

ui.item.sortableMultiSelect API documentation

Allow multi-selection on click

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:

selectedIndexes

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

selectedModels

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.

indexes

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

models

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.

moved

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

sourceElement

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