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
orsourceItemScope
is thescope
object of the dragging itemtargetScope
is thescope
object which the dragging item is dragging over.modelData
is the data bint with the dragging itemdestScope
is thescope
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
Development environment setup
Prerequisites
- Node Package Manager (NPM)
- Git
Dependencies
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.