Reorder

The reorder component creates a list where users can drag-and-drop rows into their preferred order. The rows can display a title and description.

Reorder settings

  • bb-reorder — Creates a list where users can drag-and-drop rows.
    • bb-reorder-items — Specifies an array of items that users can sort. The array should contain objects that provide title and description properties.

Demo

Current order:

  • {{item.title}}

Markup

<div ng-controller="ReorderTestController as reorderCtrl">
  <div style="width: 300px">
    <bb-reorder bb-reorder-items="reorderCtrl.itemsToSort"></bb-reorder>
  </div>

  <div style="margin-top: 10px;">
    <h4>Current order:</h4>

    <ul ng-repeat="item in reorderCtrl.itemsToSort">
      <li>{{item.title}}</li>
    </ul>
  </div>
</div>

JavaScript


/* global angular*/

(function () {
    'use strict';

    function ReorderTestController() {
        var vm = this;

        vm.itemsToSort = [
            {
                title: 'Title 1',
                description: 'Description 1'
            },
            {
                title: 'Title 2',
                description: 'Description 2'
            },
            {
                title: 'Title 3',
                description: 'Description 3'
            },
            {
                title: 'Title 4',
                description: 'Description 4'
            }
        ];
    }

    angular.module('stache')
        .controller('ReorderTestController', ReorderTestController);
}());