Answer the question
In order to leave comments, you need to log in
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 questionAsk a Question
731 491 924 answers to any question