I have several vertical lists and would like to prevent dragging to certain positions within one list. Is there a way to prevent items to be dropped in certain positions (for example disallow moving in the same column) in one of the responders of DragDropContext
.
In the following example I just returned when the source and destination columns are the same, but visually this would first allow the row to be inserted in the new position and then re-rendered where it was before.
const columns = [{id: 1, rows: ['a', 'b', 'c']}, {id: 2, rows: ['d', 'e', 'f']}, {id: 3, rows: ['g', 'h', 'i']}];
const onDragEnd = (result) => {
const {destination, source, draggableId} = result;
if (!destination || (destination.droppableId === source.droppableId && destination.index === source.index)) {
return;
}
const sourceColumn = columns.find(column => column.id === source.droppableId);
const destinationColumn = columns.find(column => column.id === destination.droppableId);
// prevent moving in the same column
if (sourceColumn === destinationColumn) {
return;
}
};
<DragDropContext onDragEnd={onDragEnd}>
{columns.map(column => {(
<Column key={column.id}>
{column.rows.map(row => <Row>{row}</Row>)}
</Column>
)})}
</DragDropContext>