Warning: This site describes the AngularJS (1.x) implementation of the SKY UX framework. We still support this version, but it is in maintenance mode. We no longer develop features for this version of SKY UX, and we recommend that you use the latest version instead. For more information, see developer.blackbaud.com/skyux.

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);
}());