How to prevent an item from being dragged outside a grid container in react-sortable-hoc?

Question

I'm trying to implement a sortable xy axis grid with react-sortable-hoc. But the sortable items are allowed to move outside the grid container, which I want to prevent

I have tried using the lockOffset and lockAxis, but this will restrict movement within my grid as well, so I'm looking for a solution which will allow xy axis movement within my container, but not outside.

Answer 1

There is another prop in the SortableContainer element lockToContainerEdges that should do what you're looking for.