Запретить передвижение элемента 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 не захватит событие перетаскивание над этим элементом,а мне надо именно перехватить это событие,когда один элемент находится надо вторым.


Ответы (0 шт):