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
Copy file name to clipboardExpand all lines: README.md
+45-40
Original file line number
Diff line number
Diff line change
@@ -7,7 +7,7 @@ Angular 1 module that integrates with Sortable.js
7
7
8
8
## Install with NPM
9
9
10
-
npm install angular-legacy-sortablejs-maintained
10
+
npm install angular-legacy-sortablejs-maintained
11
11
12
12
Don't install the old angular-legacy-sortablejs package as thats not maintained
13
13
@@ -17,59 +17,64 @@ Don't install the old angular-legacy-sortablejs package as thats not maintained
17
17
18
18
```js
19
19
angular.module('exampleApp', ['ng-sortable'])
20
-
.component('dragAndDropExample', {
21
-
template:`<ul ng-sortable>
22
-
<li ng-repeat="item in ['burgers', 'chips', 'hotdog']">
23
-
{$ item $}
24
-
</li>
25
-
</ul>`,
26
-
})
20
+
.component('dragAndDropExample', {
21
+
template:`<ul ng-sortable>
22
+
<li ng-repeat="item in ['burgers', 'chips', 'hotdog']">
23
+
{$ item $}
24
+
</li>
25
+
</ul>`,
26
+
})
27
27
```
28
28
29
29
## Specifying a Config
30
30
You can pass a Config obj to `ng-sortable` and it will pass this onto the created sortable object. The available options can be found [here](https://github.com/RubaXa/Sortable#options)
31
31
32
32
```js
33
33
angular.module('exampleApp', ['ng-sortable'])
34
-
.component('dragAndDropExample', {
35
-
template:`<ul ng-sortable=$ctrl.sortableConf>
36
-
<li ng-repeat="item in ['burgers', 'chips', 'hotdog']">
37
-
{$ item $}
38
-
</li>
39
-
</ul>`,
40
-
controller:functionComponentController() {
41
-
var ctrl =this;
42
-
ctrl.sortableConf= {
43
-
animation:350,
44
-
chosenClass:'sortable-chosen',
45
-
forceFallback:true,
46
-
};
47
-
},
48
-
});
34
+
.component('dragAndDropExample', {
35
+
template:`
36
+
<ul ng-sortable=$ctrl.sortableConf>
37
+
<li ng-repeat="item in ['burgers', 'chips', 'hotdog']">
38
+
{$ item $}
39
+
</li>
40
+
</ul>`,
41
+
controller:classExampleController {
42
+
constructor() {
43
+
this.sortableConf= {
44
+
animation:350,
45
+
chosenClass:'sortable-chosen',
46
+
handle:'.grab-handle',
47
+
forceFallback:true,
48
+
};
49
+
}
50
+
},
51
+
});
49
52
```
50
53
51
54
# Drag handle
52
55
Example showing how use the handle option
53
56
54
57
```js
55
58
angular.module('exampleApp', ['ng-sortable'])
56
-
.component('dragAndDropExample', {
57
-
template:`<ul ng-sortable=$ctrl.sortableConf>
58
-
<li ng-repeat="item in ['burgers', 'chips', 'hotdog']" draggable="false">
59
-
<span class="grab-handle">Drag Header</span>
60
-
<div>{$ item $}</div>
61
-
</li>
62
-
</ul>`,
63
-
controller:functionComponentController() {
64
-
var ctrl =this;
65
-
ctrl.sortableConf= {
66
-
animation:350,
67
-
chosenClass:'sortable-chosen',
68
-
handle:'.grab-handle',
69
-
forceFallback:true,
70
-
};
71
-
},
72
-
});
59
+
.component('dragAndDropExample', {
60
+
template:`
61
+
<ul ng-sortable=$ctrl.sortableConf>
62
+
<li ng-repeat="item in ['burgers', 'chips', 'hotdog']" draggable="false">
0 commit comments