Class: component_ directive:ngeoSortable

ngeo.misc.module:sortableComponent.component_

new component_($timeout)

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

HTML attributes:
Name Type Attributes Description
ngeo-sortable Array:.<ol.layer.Base:> The layers to sort.
ngeo-sortable-options ngeox.miscSortableOptions The options.
ngeo-sortable-callback function <nullable>
 Callback function called after the move end. The Function will be called with the element and the sort array as arguments.
ngeo-sortable-callback-ctx Object <nullable>
 Context to apply at the call of the callback function.
src/misc/sortableComponent.js:56
Returns:
angular.Directive

The directive specs.