CODEWITHSUNDEEP
reactjsreact-beautiful-dndsortablejsreact-sortable-hoc
Rajat Verma
Rajat Verma

Reputation: 460

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

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

Upvotes: 1

Views: 1449

Answers (2)

ozgrozer
ozgrozer

Reputation: 2042

If you want to lock the vertical movement on a horizontal list you could manually update the item's transform property in react-beautiful-dnd.

<Draggable key={index} index={index} draggableId={draggableId}>
  {(provided, snapshot) => {
    const transform = provided.draggableProps.style.transform
    if (transform) {
      const t = transform.split(',')[0]
      provided.draggableProps.style.transform = t + ', 0px)'
    }

    return (
      <div
        ref={provided.innerRef}
        {...provided.draggableProps}
        {...provided.dragHandleProps}
        style={{ ...provided.draggableProps.style }}
      >
        item
      </div>
    )
  }}
</Draggable>

Upvotes: 0

hassam naseer
hassam naseer

Reputation: 11

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.

Upvotes: 1

Related Questions