1

How to make sure that Draggable component do not go ouside the Dropable Area or some specific div in react-beautiful-dnd??

I want to make sure that the draggable component do not go outside of some specific div or area or outside dropable area.

In current time I could not find any work around to restrict the movement of Draggable component in some specific area or container. Any help and suggestion in most welcome.

Thanks

Rajat Verma
  • 420
  • 1
  • 7
  • 19

1 Answers1

1

You can use react-sortable-hoc for this. It lets you lock your sortableElement to stay in the sortableContainer by passing lockToContainerEdges to the HOC. react-beautiful-dnd also has one big limitation that it only works in one direction i.e either horizontally or vertically but with react-sortable-hoc you can pass axis='xy' to the sortableContainer HOC and it lets you sort in a grid.

hassam naseer
  • 11
  • 1