Angular UI NestedSortable

Angular NestedSortable is an AngularJS UI component that can sort nested lists, provides drag & drop support and doesn't depend on jQuery.

Features

• Uses the native AngularJS scope for data binding
• Sorted and move items through the entire tree
• Prevent elements from accepting child nodes

Supported browsers

The Angular NestedSortable is tested with the following browsers:

• Chrome (stable)
• Firefox
• IE 8, 9 and 10

For IE8 support, make sure you do the following:

• include an ES5 shim
• make your AngularJS application compatible with Internet Explorer
• use jQuery 1.x

Demo

Watch the NestedSortable component in action on the demo page.

Requirements

• Angularjs

Usage

Load the script file: angular-nested-sortable.js in your application:

Add the sortable module as a dependency to your application module:

Injecting ui.nestedSortable, ui-nested-sortable-item and ui-nested-sortable-handle to your html.

HTML View or Templates html <ol ui-nested-sortable="" ng-model="list"> <li ng-repeat="item in list" ui-nested-sortable-item=""> <div ui-nested-sortable-handle> {{item.title}} </div> <ol ui-nested-sortable="" ng-model="item.items"> <li ng-repeat="subItem in item.items" ui-nested-sortable-item=""> <div ui-nested-sortable-handle> {{subItem.title}} </div> </li> </ol> </li> </ol>
Developing Notes: - Using ng-model to bind the list data with element. It should be an array and it's required. - Adding ui-nested-sortable to your root element. - Adding ui-nested-sortable-item to your item element, it always follow the ng-repeat attribute. - Adding ui-nested-sortable-handle to mark which element do you want to handle the drage action - All ui-nested-sortable, ng-model, ui-nested-sortable-item and ui-nested-sortable-handle are necessary. And they can be nested. - If you add a data-nodrag attribute to an element, the element won't response for the drag action. - If you changed the datasource bound, sometimes you have to call $scope.$apply() to refresh the view, otherwise you will get an error Cannot read property '0' of undefined (Issue #32).

Callbacks

The Callbacks can be passed through the directive.

• accept callback: Check if the dragging item can be dropped to current item. return true means it can be dropped here. return false means it cann't.
• itemRemoved callback: When a sub-item is removed.
• itemAdded callback: When a sub-item is added.
• itemMoved callback: When a sub-item is moved from a node to another node.
• orderChanged callback: Is only fired if the dragged item gets dropped at the same parent node.
• itemClicked callback: When an item is clicked.

Parameters

• scope, sourceScope or sourceItemScope is the scope object of the dragging item
• targetScope is the scope object which the dragging item is dragging over.
• modelData is the data bint with the dragging item
• destScope is the scope object which the dragged item dropped.
• sourceIndex is the index of item before it dragged.
• destIndex is the index of item after it dropped.

Scope of Sortable

The scope of a ui-nested-sortable element.

Methods

parentItemScope()

if a ui-nested-sortable element belongs to another ui-nested-sortable-item element, using parentItemScope() to get the scope of it's parent item.

level()

Calculate it's level in the tree. The level of a root element is 1.

Scope of Item

The scope of a ui-nested-sortable-item element.

Methods

itemData()

Get the model data which bind with the scope.

maxSubLevels()

Get the max level of all the sub-items of the scope. If there is no sub-items, return 0.

parentScope()

Get the scope of the parent ui-nested-sortable element.

subScope()

Get the scope of the child ui-nested-sortable element.

NgModules Link

Give us a like on ngmodules

Development environment setup

Prerequisites

• Node Package Manager (NPM)
• Git

Dependencies

• Grunt (task automation)
• Bower (package management)

Installation

Run the commands below in the project root directory.

1. Install Grunt and Bower

2. Install project dependencies

Useful commands

Running a Local Development Web Server

To debug code and run end-to-end tests, it is often useful to have a local HTTP server. For this purpose, we have made available a local web server based on Node.js.

To start the web server, run:

To access the local server, enter the following URL into your web browser:

By default, it serves the contents of the demo project.

Building NestedSortable

To build NestedSortable, you use the following command.

This will generate non-minified and minified JavaScript files in the dist directory.

Run tests

You can run the tests once or continuous.