N
N
nikmil2019-10-23 14:04:31
React
nikmil, 2019-10-23 14:04:31

React beautiful dnd how to prevent last element from moving?

Hello, so I liked the question of dnd, maybe one of you also used it, how to forbid moving an object if it is the last one in the column?
https://react-beautiful-dnd.netlify.com/?path=/sto...
Here is an example, let's say we have 2 columns Jake and Bmo. Each has 4 objects in the column, and if there is 1 object left in the Jake column, then there is a ban on its movement, and this object can be moved only if there are 2 objects in the Jake column. The same rule is passed to the Bmo column.
https://github.com/atlassian/react-beautiful-dnd in it you can see the code presented in the link above.
In my code, the transfer from 1 column to another is implemented like this:

onDragEnd(result) {
    // dropped outside the list
    if (!result.destination) {
      return;
    }

    console.log(result);
    //return;

    // Перенос в другой лист
    if (result.destination.droppableId !== result.source.droppableId) {
      // Если переносим из второй колоки в первую
      if (result.destination.droppableId === "droppable1") {
        let items1 = this.state.items1;
        let items2 = this.state.items2;

        items1.unshift(items2[result.source.index]);
        items2.splice(result.source.index, 1);

        items1 = reorder(this.state.items1, 0, result.destination.index);
        this.setState({ items1 });
      } else
        // Если переносим из первой колоки во вторую
        if (result.destination.droppableId === "droppable2") {
          let items1 = this.state.items1;
          let items2 = this.state.items2;

          items2.unshift(items1[result.source.index]);
          items1.splice(result.source.index, 1);

          items2 = reorder(this.state.items2, 0, result.destination.index);
          this.setState({ items2 });
        }
    }
    // Перенос внутри этого листа
    else {
      if (result.destination.droppableId === "droppable1") {
        let items1 = reorder(this.state.items1, result.source.index, result.destination.index);
        this.setState({ items1 });
      } else
        if (result.destination.droppableId === "droppable2") {
          let items2 = reorder(this.state.items2, result.source.index, result.destination.index);
          this.setState({ items2 });
        }
    }
  }

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question