You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository was archived by the owner on Sep 8, 2020. It is now read-only.
Copy file name to clipboardExpand all lines: API.md
+3
Original file line number
Diff line number
Diff line change
@@ -2,6 +2,9 @@
2
2
3
3
## Properties
4
4
5
+
**Note:**
6
+
The properties of `ui.item.sortable` object are cleared right after the stop callback fires. If you need to access them after the sorting ends, you should keep references in separate variables in your code.
Since some issues may be caused by jquery-ui-sortable and not by the wrapping that angular-ui-sortable does,
12
+
please try your use case using [this plain jquery-ui sortable example](http://codepen.io/thgreasi/pen/rarQvR) before opening a new issue in the repositry.
[](https://gitter.im/angular-ui/ui-sortable?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
5
6
6
7
This directive allows you to sort an array with drag & drop.
7
8
8
9
## Requirements
9
10
10
11
- JQuery
11
12
- JQueryUI 1.9+
12
-
- AngularJS 1.2+
13
+
- AngularJS v1.2+
13
14
14
15
[Single minified cdn link](http://cdn.jsdelivr.net/g/jquery@1,[email protected]%28jquery.ui.core.min.js+jquery.ui.widget.min.js+jquery.ui.mouse.min.js+jquery.ui.sortable.min.js%29,[email protected],angular.ui-sortable)~245kB and [example](http://codepen.io/thgreasi/pen/olDJi) with JQuery v1.x, required parts of JQueryUI v1.10, AngularJS v1.2 & latest angular-ui-sortable.
15
16
16
17
**Notes:**
17
18
> * JQuery must be included before AngularJS.
18
19
> * JQueryUI dependecies include [core](http://api.jqueryui.com/category/ui-core/), [widget](http://api.jqueryui.com/jQuery.widget/), [mouse](http://api.jqueryui.com/mouse/) & [sortable](http://api.jqueryui.com/sortable/). Creating a [custom build](http://jqueryui.com/download/#!version=1.10&components=1110000010000000000000000000000000) will [greatly reduce](https://github.com/angular-ui/ui-sortable/issues/154#issuecomment-40279430) the required file size. ([CDN](http://www.jsdelivr.com/) links for comparison: [full](http://cdn.jsdelivr.net/g/[email protected]) vs [minimal](http://cdn.jsdelivr.net/g/[email protected]%28jquery.ui.core.min.js+jquery.ui.widget.min.js+jquery.ui.mouse.min.js+jquery.ui.sortable.min.js%29))
19
-
> * User of AngularJS pre v1.2 can use the [$watchcollection polyfill](https://github.com/thgreasi/ng-watchcollection-polyfill).
20
+
> * Users of AngularJS pre v1.2 can use [v0.10.x](https://github.com/angular-ui/ui-sortable/tree/v0.10.x-stable) or [v0.12.x](https://github.com/angular-ui/ui-sortable/tree/v0.12.x-stable) branches.
21
+
> * Early adopters of [Angular2](https://angular.io/) can use the [ng2 branch](https://github.com/angular-ui/ui-sortable/tree/ng2).
22
+
23
+
## Installation
24
+
25
+
* Install with Bower `bower install -S angular-ui-sortable`
26
+
* Install with npm `npm install -S angular-ui-sortable`
27
+
* Download one of the [Releases](https://github.com/angular-ui/ui-sortable/releases) or the [latest Master branch](https://github.com/angular-ui/ui-sortable/archive/master.zip)
20
28
21
29
## Usage
22
30
@@ -46,13 +54,19 @@ Apply the directive to your form elements:
46
54
*`ui-sortable` element should contain only one `ng-repeat`, but other non-repeater elements above or below may still exist.
47
55
Otherwise the index matching of the `ng-model`'s items and the DOM elements generated by the `ng-repeat` will break.
48
56
**In other words: The items of `ng-model` must match the indexes of the DOM elements generated by the `ng-repeat`.**
57
+
*[`Filters`](https://docs.angularjs.org/guide/filter) that manipulate the model (like [filter](https://docs.angularjs.org/api/ng/filter/filter), [orderBy](https://docs.angularjs.org/api/ng/filter/orderBy), [limitTo](https://docs.angularjs.org/api/ng/filter/limitTo),...) should be applied in the `controller` instead of the `ng-repeat` (refer to [the provided examples](#examples)).
58
+
This is the preferred way since it:
59
+
- is performance wise better
60
+
- reduces the chance of code duplication
61
+
-[is suggested by the angularJS team](https://www.youtube.com/watch?feature=player_detailpage&v=ZhfUv0spHCY#t=3048)
62
+
- it does not break the matching of the generated DOM elements and the `ng-model`'s items
49
63
*`ui-sortable` lists containing many 'types' of items can be implemented by using dynamic template loading [with ng-include](http://stackoverflow.com/questions/14607879/angularjs-load-dynamic-template-html-within-directive/14621927#14621927) or a [loader directive](https://github.com/thgreasi/tg-dynamic-directive), to determine how each model item should be rendered. Also take a look at the [Tree with dynamic template](http://codepen.io/thgreasi/pen/uyHFC) example.
50
64
51
65
### Options
52
66
53
67
All the [jQueryUI Sortable options](http://api.jqueryui.com/sortable/) can be passed through the directive.
54
68
Additionally, the `ui` argument of the available callbacks gets enriched with some extra properties as specified to the [API.md file](API.md#uiitemsortable-api-documentation).
55
-
69
+
Any model changes that happen inside the available callbacks, are applied right after the stop event. We are not wrapping callbacks like `start`/`change`/... with `$apply`, in order to minimize the number of digest loops and avoid possible modifications of the model (eg: by watchers) before the drop takes place.
0 commit comments