@@ -9,6 +9,34 @@ npm install --save react-sortablejs
99## Options
1010
1111See 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
1442Specify 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