Class: sortableDirective directive:ngeoSortable

Provides a directive that allows drag-and-dropping DOM items between them. It also changes the order of elements in the given array.

It is typically used together with ng-repeat, for example for re-ordering layers in a map.

Example:

<ul ngeo-sortable="ctrl.layers"
    ngeo-sortable-options="{handleClassName: 'ngeo-sortable-handle'}">
  <li ng-repeat="layer in ctrl.layers">
    <span class="ngeo-sortable-handle">handle</span>{{layer.get('name')}}
  </li>
</ul>

The value of the "ngeo-sortable" attribute is an expression which evaluates to an array (an array of layers in the above example). This is the array that is re-ordered after a drag-and-drop.

The element with the class "ngeo-sortable-handle" is the "drag handle". It is required.

This directives uses $watchCollection to watch the "sortable" array. So if some outside code adds/removes elements to/from the "sortable" array, the "ngeoSortable" directive will pick it up.

See our live example: ../examples/layerorder.html