@@ -43,7 +43,6 @@ Then, include these scripts into your html file:
43
43
```
44
44
45
45
## Usage
46
- File: sortable-list.jsx
47
46
``` jsx
48
47
import React from ' react' ;
49
48
import Sortable from ' react-sortablejs' ;
@@ -65,18 +64,18 @@ const SortableList = ({ items, onChange }) => {
65
64
options= {{
66
65
}}
67
66
68
- // Use ref to get the sortable instance
67
+ // [Optional] Use ref to get the sortable instance
69
68
// https://facebook.github.io/react/docs/more-about-refs.html#the-ref-callback-attribute
70
69
ref= {(c ) => {
71
70
if (c) {
72
71
sortable = c .sortable ;
73
72
}
74
73
}}
75
74
76
- // An optional tag to specify the wrapping element. Defaults to "div".
75
+ // [Optional] A tag to specify the wrapping element. Defaults to "div".
77
76
tag= " ul"
78
77
79
- // The optional onChange method allows you to implement a controlled component and keep
78
+ // [Optional] The onChange method allows you to implement a controlled component and keep
80
79
// DOM nodes untouched. You have to change state to re-render the children.
81
80
onChange= {(order ) => {
82
81
onChange (order);
@@ -128,7 +127,7 @@ ReactDOM.render(
128
127
129
128
## Examples
130
129
131
- ### Uncontrolled Component
130
+ ### 1. Uncontrolled Component
132
131
``` js
133
132
import React from ' react' ;
134
133
import ReactDOM from ' react-dom' ;
@@ -163,7 +162,7 @@ ReactDOM.render(
163
162
);
164
163
```
165
164
166
- ### Controlled Component
165
+ ### 2. Controlled Component
167
166
168
167
``` js
169
168
import React from ' react' ;
@@ -202,7 +201,7 @@ ReactDOM.render(
202
201
);
203
202
```
204
203
205
- ### Shared Group
204
+ ### 3. Shared Group
206
205
Using the ` group ` option to drag elements from one list into another.
207
206
208
207
File: index.jsx
@@ -211,29 +210,30 @@ import React from 'react';
211
210
import ReactDOM from ' react-dom' ;
212
211
import SharedGroup from ' ./shared-group' ;
213
212
214
- const SortableList = (props ) => {
213
+ const App = (props ) => {
215
214
return (
216
215
< div>
217
216
< SharedGroup
218
217
items= {[' Apple' , ' Banaba' , ' Cherry' , ' Grape' ]}
219
218
/ >
219
+ < br/ >
220
220
< SharedGroup
221
221
items= {[' Lemon' , ' Orange' , ' Pear' , ' Peach' ]}
222
222
/ >
223
223
< / div>
224
224
);
225
225
};
226
226
227
- ReactDOM .render (< SortableList / > , document .getElementById (' container' ));
227
+ ReactDOM .render (< App / > , document .getElementById (' container' ));
228
228
```
229
229
230
230
File: shared-group.jsx
231
231
``` js
232
232
import React from ' react' ;
233
- import Sortable from ' react-sortablejs ' ;
233
+ import Sortable from ' ../src ' ;
234
234
235
235
const SharedGroup = ({ items }) => {
236
- item = items .map (item => < li> {item }< / li> );
236
+ items = items .map (( val , key ) => ( < li key = {key} data - id = {val} > {val }< / li> ) );
237
237
238
238
return (
239
239
< Sortable
0 commit comments