React beautiful dnd как запретить последнему элементу перемещаться?

Question

[nikmil]

Здравствуйте, так вот вопрос понравился dnd, может кто-то из вас им тоже пользовался, как запретить перемещать объект, если он последний в колонке?
https://react-beautiful-dnd.netlify.com/?path=/sto...
Вот пример, допустим у нас 2 колонки Jake и Bmo. У каждого по 4 объекта в колонке и если в колонке Jake останется 1 объект, то идет запрет на его перемещение, и этот объект можно будет переместить только в том случае, если в колонке Jake будет 2 объекта. Тоже самое правило передается на колонку Bmo.
https://github.com/atlassian/react-beautiful-dnd в нем можно увидеть код, ктр представлен в ссылке выше.

У меня в коде перенос из 1 колонки в другую реализован вот так:

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 1

[Дмитрий Воробьев]

Для того чтобы запретить определенному элементу перемещаться (перетаскиваться), необходимо этому элементу в пропсах передать isDragDisabled={true}, более конкретнее вы можете прочитать здесь

Конкретно в вашем случае необходимо установить условие при котором у всех элементов будет

<Draggable 
                      key={item.id} 
                      draggableId={item.id} 
                      index={index}
                      isDragDisabled={false}
                    >

И только если элемент становился последним

<Draggable 
                      key={item.id} 
                      draggableId={item.id} 
                      index={index}
                      isDragDisabled={true}
                    >