Невозможно перетащить компоненты в тот же Droppable Reaction-Beautiful-Dnd - PullRequest
Новая
       28

Невозможно перетащить компоненты в тот же Droppable Reaction-Beautiful-Dnd

0 голосов
/ 30 марта 2019

То, что происходит, когда у меня есть несколько элементов в столбце и я пытаюсь перетащить один, отображается только один, и в соответствии с найденными уроками здесь Я должен быть в точке, где я могу перемещать элементы в пределах тот же столбец, но не может. В React dev инструменты состояния и r-b-dnd идентификаторы выглядят хорошо, но что я знаю? Я просто новичок. Вот что у меня есть в моем onDragEnd пока. 

  onDragEnd = result => {
    const { destination, source, draggableId } = result;
    if (!destination) return;
    if (
      destination.droppableId === source.droppableId &&
      destination.index === source.index
    ) {
      return;
    }
    let start = this.state.list[source.droppableId];
    let finish = this.state.list[destination.droppableId];
    if (start === finish) {
      let updatedList = this.state.list.map(obj => {
        if (obj.id === source.droppableId) {
          obj.cards.splice(source.index, 1);
          obj.cards.splice(destination.index, 0, draggableId);
        }
        return obj;
      });
      this.setState({ list: updatedList });
    }

А мое приложение можно найти здесь . Спасибо.

1 Ответ

1 голос
/ 31 марта 2019

В вашем коде, в onDragEnd, у вас есть этот код, поэтому вы не можете переставлять элементы в одном списке. При перемещении элементов по одному и тому же списку идентификаторы Droppable для источника и назначения будут одинаковыми. 

if (destination.droppableId === source.droppableId && destination.index === source.index) {
  console.log("they're equal");
  return;
}
  1. В вашем компоненте идентификатор перетаскивания одинаков для всех элементов в списке. Он должен быть уникальным для каждого перетаскиваемого элемента. 
const Card = props => {
  return (
    // This is NOT unique. This should be dynamic, we should use idx probably.
    <Draggable draggableId={props.col + "-" + props.color} index={props.idx}>
      {provided => (

После исправления этих двух я могу перемещать предметы: https://codesandbox.io/s/r5z28w85yo. Надеюсь, это полезно.

...