Item being dragged is not moving when lockToContainerEdges is true

Item being dragged is not moving. I’m using the basic example to do this with the lockToContainerEdges prop. Sample code below:

`const SortableItem = sortableElement(({value}) => <li style={{ color: ‘white’}}>{value});

const SortableContainer = sortableContainer(({children}) => { return

{children}

; });

class App extends Component { state = { items: [‘Item 1’, ‘Item 2’, ‘Item 3’, ‘Item 4’, ‘Item 5’, ‘Item 6’], };

onSortEnd = ({oldIndex, newIndex}) => { this.setState(({items}) => ({ items: arrayMove(items, oldIndex, newIndex), })); };

render() { const {items} = this.state;

return (
  <SortableContainer lockToContainerEdges={true} onSortEnd={this.onSortEnd}>
    {items.map((value, index) => (
      <SortableItem key={`item-${value}`} index={index} value={value} />
    ))}
  </SortableContainer>
);

} }`

[dcsaszar]

The item not moving is caused by translate3d receiving NaN values. This issue may be caused by the following change to the limit util:

https://github.com/clauderic/react-sortable-hoc/commit/6e8fe9f9bdf36cd59f7d9d46ee31560ec9d52ff8#diff-2b4ca49d4bb0a774c4d4c1672d7aa781R67-R69

Under some circumstances, limit is called with undefined for min and max. The old code returned value in this case, the new code returns NaN.

For vertical dragging, the issue can be worked around by:

• setting lockAxis="x", because this will override NaN with 0
• not setting lockToContainerEdges, because this will not run the limit code in question
• setting axis="xy", because this will prevent undefined arguments to limit

[mmichael0413]

Turns out I’m just an idiot. I was using lockAxis="x" but didn’t set axis="x", so once I added the axis prop, lockToContainerEdges started working. @rjdecilos I have a feeling that once you fix your container issue (missing wrapping element), or any other incorrect props, you’ll see that lockToContainerEdges starts to work.