Skip to content
This repository was archived by the owner on Sep 8, 2020. It is now read-only.

Commit 2e22b0e

Browse files
committed
docs(README): add section about floating workaround & example
1 parent 830831c commit 2e22b0e

File tree

1 file changed

+36
-0
lines changed

1 file changed

+36
-0
lines changed

README.md

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,41 @@ myAppModule.controller('MyController', function($scope) {
6969
When using event callbacks ([start](http://api.jqueryui.com/sortable/#event-start)/[update](http://api.jqueryui.com/sortable/#event-update)/[stop](http://api.jqueryui.com/sortable/#event-stop)...), avoid manipulating DOM elements (especially the one with the ng-repeat attached).
7070
The suggested pattern is to use callbacks for emmiting events and altering the scope (inside the 'Angular world').
7171

72+
#### Floating
73+
74+
To have a smooth horizontal-list reordering, jquery.ui.sortable needs to detect the orientation of the list.
75+
This detection takes place during the initialization of the plugin (and some of the checks include: whether the first item is floating left/right or if 'axis' parameter is 'x', etc).
76+
There is also a [known issue](bugs.jqueryui.com/ticket/7498) about initially empty horizontal lists.
77+
78+
To provide a solution/workaround (till jquery.ui.sortable.refresh() also tests the orientation or a more appropriate method is provided), ui-sortable directive provides a `ui-floating` option as an extra to the [jquery.ui.sortable options](http://api.jqueryui.com/sortable/).
79+
80+
```html
81+
<ul ui-sortable="{ 'ui-floating': true }" ng-model="items">
82+
<li ng-repeat="item in items">{{ item }}</li>
83+
</ul>
84+
```
85+
86+
**OR**
87+
88+
```js
89+
$scope.sortableOptions = {
90+
'ui-floating': true
91+
};
92+
```
93+
```html
94+
<ul ui-sortable="sortableOptions" ng-model="items">
95+
<li ng-repeat="item in items">{{ item }}</li>
96+
</ul>
97+
```
98+
99+
100+
**ui-floating** (default: undefined)
101+
Type: [Boolean](http://api.jquery.com/Types/#Boolean)/[String](http://api.jquery.com/Types/#String)/`undefined`
102+
* **undefined**: Relies on jquery.ui to detect the list's orientation.
103+
* **false**: Forces jquery.ui.sortable to detect the list as vertical.
104+
* **true**: Forces jquery.ui.sortable to detect the list as horizontal.
105+
* **"auto"**: Detects on each drag `start` if the element is floating or not.
106+
72107
#### Canceling
73108

74109
Inside the `update` callback, you can check the item that is dragged and cancel the sorting.
@@ -138,6 +173,7 @@ For more details about the events check the [jQueryUI API documentation](http://
138173
- [Filtering](http://codepen.io/thgreasi/pen/mzGbq) ([details](https://github.com/angular-ui/ui-sortable/issues/113))
139174
- [Ordering 1](http://codepen.io/thgreasi/pen/iKEHd) & [Ordering 2](http://plnkr.co/edit/XPUzJjdvwE0QWQ6py6mQ?p=preview) ([details](https://github.com/angular-ui/ui-sortable/issues/70))
140175
- [Cloning](http://codepen.io/thgreasi/pen/qmvhG) ([details](https://github.com/angular-ui/ui-sortable/issues/139))
176+
- [Horizontal List](http://codepen.io/thgreasi/pen/wsfjD)
141177
- [Tree with dynamic template](http://codepen.io/thgreasi/pen/uyHFC)
142178
- Canceling
143179
- [Connected Lists With Max Size](http://codepen.io/thgreasi/pen/IdvFc)

0 commit comments

Comments
 (0)