0

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>
doberkofler
  • 9,511
  • 18
  • 74
  • 126

0 Answers0