Item being dragged is not moving when lockToContainerEdges is true

[rjdecilos]

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>
);

} }`

[rjdecilos]

@clauderic

[mmichael0413]

Having the same issue. @rjdecilos I notice that you're not wrapping children in a parent element. I'm curious if you're getting any console errors. I was doing something similar at first and the sortable helper only started working when I wrapped the sortable elements (inside the container) in a div:

const SortableContainer = sortableContainer(({ styles, children }) => {
    return <Div styles={styles}>{children}</Div>;
});

That being said, I'm also seeing that the item being dragged isn't moving when I use lockToContainerEdges .

[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.

[rjdecilos]

Thank you for this, I'll try it out @mmichael0413

[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