Запретить передвижение элемента React-Beautiful-dnd
У меня есть следующая структура приложения:
<DragDropContext onDragStart={props.onDragStart} onDragEnd={props.onDragEnd} >
<Droppable droppableId="droppable-1" type="BIN">
{(provided, snapshot) => (
<div ref={provided.innerRef} className="empty" {...provided.droppableProps}>
<Draggable isCombineEnabled draggableId="draggable-1" index={0}>
{(provided, snapshot) => (
<div ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps} className="drag">
</div>
)}
</Draggable>
{provided.placeholder}
</div>
)}
</Droppable>
<Droppable droppableId="droppable-2" type="BIN">
{(provided, snapshot) => (
<div ref={provided.innerRef} className="empty" {...provided.droppableProps}>
<Draggable isCombineEnabled draggableId="draggable-2" index={1}>
{(provided, snapshot) => (
<div ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps} className="drag">
</div>
)}
</Draggable>
{provided.placeholder}
</div>
)}
</Droppable>
</DragDropContext>
Это всё расположено по сетке и я хочу передвигать Draggable элемент внутри неё.На пустую клетку объект встаёт,но если он наслаивается на другой Draggable элемент,то он сдвигается вниз:
Как мне запретить ему двигаться? Можно добавить в <Droppable/> isDropDisabled={true}, но тогда onDragEnd не захватит событие перетаскивание над этим элементом,а мне надо именно перехватить это событие,когда один элемент находится надо вторым.
