Skip to content

Commit 8be358b

Browse files
committed
Update README.md
1 parent 7a28d26 commit 8be358b

File tree

1 file changed

+44
-0
lines changed

1 file changed

+44
-0
lines changed

README.md

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,34 @@ npm install --save react-sortablejs
99
## Options
1010

1111
See more options at https://github.com/RubaXa/Sortable#options
12+
```js
13+
{
14+
ref: 'list',
15+
model: 'items',
16+
// Sortable options
17+
group: "name", // or { name: "...", pull: [true, false, clone], put: [true, false, array] }
18+
sort: true, // sorting inside list
19+
delay: 0, // time in milliseconds to define when the sorting should start
20+
disabled: false, // Disables the sortable if set to true.
21+
store: null, // @see Store
22+
animation: 150, // ms, animation speed moving items when sorting, `0` — without animation
23+
handle: ".my-handle", // Drag handle selector within list items
24+
filter: ".ignore-elements", // Selectors that do not lead to dragging (String or Function)
25+
draggable: ".item", // Specifies which items inside the element should be sortable
26+
ghostClass: "sortable-ghost", // Class name for the drop placeholder
27+
chosenClass: "sortable-chosen", // Class name for the chosen item
28+
dataIdAttr: 'data-id',
29+
forceFallback: false, // ignore the HTML5 DnD behaviour and force the fallback to kick in
30+
fallbackClass: "sortable-fallback" // Class name for the cloned DOM Element when using forceFallback
31+
fallbackOnBody: false // Appends the cloned DOM Element into the Document's Body
32+
scroll: true, // or HTMLElement
33+
scrollSensitivity: 30, // px, how near the mouse must be to an edge to start scrolling.
34+
scrollSpeed: 10, // px
35+
setData: function (dataTransfer, dragEl) {
36+
dataTransfer.setData('Text', dragEl.textContent);
37+
}
38+
}
39+
```
1240

1341
#### `ref` option
1442
Specify which items inside the `ref` attribute should be sortable.
@@ -32,6 +60,22 @@ class MySortableComponent extends React.Component {
3260
items: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
3361
};
3462

63+
handleStart(evt) { // Dragging started
64+
}
65+
handleEnd(evt) { // Dragging ended
66+
}
67+
handleAdd(evt) { // Element is dropped into the list from another list
68+
}
69+
handleRemove(evt) { // Element is removed from the list into another list
70+
}
71+
handleUpdate(evt) { // Changed sorting within list
72+
}
73+
handleSort(evt) { // Called by any change to the list (add / update / remove)
74+
}
75+
handleFilter(evt) { // Attempt to drag a filtered element
76+
}
77+
handleMove(evt) { // Event when you move an item in the list or between lists
78+
}
3579
render() {
3680
const items = this.state.items.map((text, index) => (
3781
<li key={index}>{text}</li>

0 commit comments

Comments
 (0)