diff --git a/README.md b/README.md index 0921dbb21..8a473c75d 100644 --- a/README.md +++ b/README.md @@ -105,6 +105,7 @@ There are already a number of great Drag & Drop libraries out there (for instanc | shouldCancelStart | Function | [Function](https://github.com/clauderic/react-sortable-hoc/blob/master/src/SortableContainer/index.js#L48) | This function is invoked before sorting begins, and can be used to programatically cancel sorting before it begins. By default, it will cancel sorting if the event target is either an `input`, `textarea`, `select` or `option`. | | onSortStart | Function | | Callback that is invoked when sorting begins. `function({node, index, collection}, event)` | | onSortMove | Function | | Callback that is invoked during sorting as the cursor moves. `function(event)` | +| onSortOver | Function | | Callback that get's invoked when moving over an item. `function({index, oldIndex, newIndex, collection}, e)` | | onSortEnd | Function | | Callback that is invoked when sorting ends. `function({oldIndex, newIndex, collection}, e)` | | useDragHandle | Boolean | `false` | If you're using the `SortableHandle` HOC, set this to `true` | | useWindowAsScrollContainer | Boolean | `false` | If you want, you can set the `window` as the scrolling container | @@ -156,11 +157,11 @@ const SortableList = SortableContainer(({items}) => { return ( diff --git a/src/SortableContainer/index.js b/src/SortableContainer/index.js index 1216aab22..76830ddd8 100644 --- a/src/SortableContainer/index.js +++ b/src/SortableContainer/index.js @@ -69,6 +69,7 @@ export default function sortableContainer(WrappedComponent, config = {withRef: f contentWindow: PropTypes.any, onSortStart: PropTypes.func, onSortMove: PropTypes.func, + onSortOver: PropTypes.func, onSortEnd: PropTypes.func, shouldCancelStart: PropTypes.func, pressDelay: PropTypes.number, @@ -565,7 +566,7 @@ export default function sortableContainer(WrappedComponent, config = {withRef: f } animateNodes() { - const {transitionDuration, hideSortableGhost} = this.props; + const {transitionDuration, hideSortableGhost, onSortOver} = this.props; const nodes = this.manager.getOrderedRefs(); const deltaScroll = { left: this.scrollContainer.scrollLeft - this.initialScroll.left, @@ -579,6 +580,7 @@ export default function sortableContainer(WrappedComponent, config = {withRef: f top: (window.pageYOffset - this.initialWindowScroll.top), left: (window.pageXOffset - this.initialWindowScroll.left), }; + const prevIndex = this.newIndex; this.newIndex = null; for (let i = 0, len = nodes.length; i < len; i++) { @@ -723,6 +725,15 @@ export default function sortableContainer(WrappedComponent, config = {withRef: f if (this.newIndex == null) { this.newIndex = this.index; } + + if (onSortOver && this.newIndex !== prevIndex) { + onSortOver({ + newIndex: this.newIndex, + oldIndex: prevIndex, + index: this.index, + collection: this.manager.active.collection, + }); + } } autoscroll = () => {