ng-sortable

implementation of ng-sortable. You will need to include the CSS from the bower component.

There are 3 different styles for ng-sortable: full-width sort items, right aligned handle, left aligned handle

full-width sortable items

Used to make your list draggable without any specific area for the interaction

<div id="yourID" as-sortable="{containment: '#yourID'}" ng-model="yourModel">
<a ng-repeat="item in yourModel" as-sortable-item><div as-sortable-item-handle>Your content</div></a>
</div>

Right aligned handle

Used to make your list draggable with a handle align on the right side

<div id="yourID" as-sortable="{containment: '#yourID'}" ng-model="yourModel" class="sortable sortable--whandle sortable--whandle-right">
<a ng-repeat="item in yourModel" as-sortable-item>Your content<i class="lui icon drag2" as-sortable-item-handle></i></a>
</div>

Left aligned handle

Used to make your list draggable with a handle align on the left side, pushing your content to the right

<div id="yourID" as-sortable="{containment: '#yourID'}" ng-model="yourModel" class="sortable sortable--whandle sortable--whandle-left">
  <a ng-repeat="item in yourModel" as-sortable-item>Your content<i class="lui icon drag2" as-sortable-item-handle></i></a>
</div>

The DOM Structure

Using ng-sortable requires 3 DOM element: a container, a set of items and a handle for each item.

<container id="yourID" ng-model="yourModel" class="sortable" as-sortable="{containment: '#yourID'}">
  <item ng-repeat as-sortable-item>
    <content/>
    <handle as-sortable-item-handle/>
  </item>
</container>

1- The container

The DOM element that wraps your sortable elements

2- The item

The DOM element that can be dragged around (mostly your ng-repeat item)

3- The handle

The DOM element that will be clicked on to start dragging. Can be the whole content or a isolated element. It must be distinct and included in the item itself