`s and `| `s.
### Attributes For Event Handling
To handle events with html bindings just define any expression to listed event attributes.
If you defined an attribute for this events and defined callback function in sortableOptions at the same time, the attribute based callback will be called first.
* **ui-sortable-start**
* **ui-sortable-activate**
* **ui-sortable-before-stop**
* **ui-sortable-update**
* **ui-sortable-remove**
* **ui-sortable-receive**
* **ui-sortable-deactivate**
* **ui-sortable-stop**
Expression works on update event.
```html
```
On update event callBackFunction1 if called before callBackFunction2.
```js
$scope.sortableOptions = {
'update': callBackFunction2
};
```
```html
```
### Canceling
Inside the `update` callback, you can check the item that is dragged and cancel the sorting.
```js
$scope.sortableOptions = {
update: function(e, ui) {
if (ui.item.sortable.model == "can't be moved") {
ui.item.sortable.cancel();
}
}
};
```
**Notes:**
* `update` is the appropriate place to cancel a sorting, since it occurs before any model/scope changes but after the DOM position has been updated.
So `ui.item.scope` and the directive's `ng-model`, are equal to the scope before the drag start.
* To [cancel a sorting between connected lists](https://github.com/angular-ui/ui-sortable/issues/107#issuecomment-33633638), `cancel` should be called inside the `update` callback of the originating list. A simple way to is to use the `ui.item.sortable.received` property:
```js
update: function(event, ui) {
if (// ensure we are in the first update() callback
!ui.item.sortable.received &&
// check that its an actual moving between the two lists
ui.item.sortable.source[0] !== ui.item.sortable.droptarget[0] &&
// check the size limitation
ui.item.sortable.model == "can't be moved between lists") {
ui.item.sortable.cancel();
}
}
```
### jQueryUI Sortable Event order
**Single sortable** [demo](http://codepen.io/thgreasi/pen/QKmWGj)
```
create
/* dragging starts */
helper
start
activate
/* multiple: sort/change/over/out */
beforeStop
update <= call cancel() here if needed
deactivate
stop
```
**Connected sortables** [demo](http://codepen.io/thgreasi/pen/YGazpJ)
```
list A: create
list B: create
/* dragging starts from sortable A to B */
list A: helper
list A: start
list B: activate
list A: activate
/* both lists multiple: sort/change/over/out */
list A: sort
list A: change
list B: change
list B: over
list A: sort
list B: out
list A: sort
list A: beforeStop
list A: update <= call cancel() here if needed
list A: remove
list B: receive
list B: update
list B: deactivate
list A: deactivate
list A: stop
```
For more details about the events check the [jQueryUI API documentation](http://api.jqueryui.com/sortable/).
## Integrating with directives doing transclusion
Wrap the transclusion directive element with the ui-sortable directive and set the `items` to target your `ng-repeat`ed elements. Following best practices, it is also highly recommended that you add a `track by` expression to your `ng-repeat`. [Angular Material example](http://codepen.io/thgreasi/pen/NbyLVK).
```js
myAppModule.controller('MyController', function($scope) {
$scope.items = ["One", "Two", "Three"];
$scope.sortableOptions = {
items: '.sortable-item'
// It is suggested to use the most specific cssselector you can,
// after analyzing the DOM elements generated by the transclusion directive
// eg: items: '> .transclusionLvl1 > .transclusionLvl2 > .sortable-item'
};
});
```
```html
```
## Examples
- [Simple Demo](http://codepen.io/thgreasi/pen/wzmvgw)
- [Simple Attribute Handlers Demo](http://codepen.io/thgreasi/pen/JWbmjb)
- [Simple RequireJS Demo](http://codepen.io/thgreasi/pen/rrdNjj)
- [Simple Touch-Enabled Demo](http://codepen.io/thgreasi/pen/wzmvJv) using [jQuery UI Touch Punch](https://github.com/furf/jquery-ui-touch-punch/)
- [Multiple items sorting (ctrl+click)](http://codepen.io/thgreasi/pen/mJAcL) using [ui-sortable-multiselection](https://github.com/thgreasi/ui-sortable-multiselection)
- [Connected Lists](http://codepen.io/thgreasi/pen/ozqNkr)
- [Filtering](http://codepen.io/thgreasi/pen/XjEWRa) ([details](https://github.com/angular-ui/ui-sortable/issues/113))
- [Ordering 1](http://codepen.io/thgreasi/pen/PGRomA) & [Ordering 2](http://plnkr.co/edit/gYsZZdFLeoeb5N9iemAO?p=preview) ([details](https://github.com/angular-ui/ui-sortable/issues/70))
- [Cloning](http://codepen.io/thgreasi/pen/jrzOLA) ([details](https://github.com/angular-ui/ui-sortable/issues/139))
- [Horizontal List](http://codepen.io/thgreasi/pen/zKWYdP)
- [Tree with dynamic template](http://codepen.io/thgreasi/pen/VKXwzV)
- Canceling
- [Connected Lists With Max Size](http://codepen.io/thgreasi/pen/zKWYEP)
- [Connected Lists Without Duplicates](http://codepen.io/thgreasi/pen/PGRoJr)
- [Promised Reverting](http://codepen.io/thgreasi/pen/ORvJzJ)
- [Locked Items](http://codepen.io/thgreasi/pen/ALyBVQ)
- [Draggable Handle](http://codepen.io/thgreasi/pen/PGRoRY)
- [Drop Zone](http://codepen.io/thgreasi/pen/zKWYWR)
- [Draggable-Sortable like interaction](http://codepen.io/thgreasi/pen/mAxdxk)
- [Static HTML Sorting](http://codepen.io/thgreasi/pen/XjEWqV)
## Integrations
- [firebase](http://codepen.io/thgreasi/pen/repEZg?editors=0010)
- [ui.bootstrap.accordion](http://plnkr.co/edit/TGIeeEbbvJwpJ3WRqo2z?p=preview)
- [Angular Meterial](http://codepen.io/thgreasi/pen/NbyLVK) (thanks yenoh2)
- [Asynchronous loading jQuery+jQueryUI with crisbeto/angular-ui-sortable-loader](https://github.com/crisbeto/angular-ui-sortable-loader)
## Reporting Issues
The [above](#examples) pen's are provided as a good starting point to demonstrate issues, proposals and use cases.
Feel free to edit any of them for your needs (don't forget to also update the libraries used to your version).
## Testing
We use Karma and jshint to ensure the quality of the code. The easiest way to run these checks is to use grunt:
```sh
npm install -g grunt-cli
npm install && bower install
grunt
```
The karma task will try to open Firefox and Chrome as browser in which to run the tests. Make sure this is available or change the configuration in `test\karma.conf.js`.
### Grunt Serve
We have one task to serve them all!
```sh
grunt serve
```
It's equal to run separately:
* `grunt connect:server` : giving you a development server at [http://127.0.0.1:8000/](http://127.0.0.1:8000/).
* `grunt karma:server` : giving you a Karma server to run tests (at [http://localhost:9876/](http://localhost:9876/) by default). You can force a test on this server with `grunt karma:unit:run`.
* `grunt watch` : will automatically test your code and build your demo. You can demo generation with `grunt build:gh-pages`.
|