Задать вопрос
@GeorgeKay

Почему не работает Drag and Drop?

Не могу понять что я делаю не так, почему я не могу ухватиться за какой либо элемент и перетащить его.
61caa6b8a807a008053351.png
import React, { useState } from "react";
import { Box } from "@material-ui/core";
import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";

import { ElementPolygon } from "./elementPolygon";

export function ListPolygon({ data }) {
  // console.log("data", data);
  // console.log("data.locations", data.locations);

  const locationsPolygon = data.locations;

  // console.log("locationsPolygon", locationsPolygon);
  const [locations, SetLocations] = useState(locationsPolygon);
  // console.log("locations", locations);

  function handleOnDragEnd(result) {
    if (!result.destination) return;

    console.log("outttttttttttttttttttt");
    const items = Array.from(locations);
    const [reorderedItem] = items.splice(result.source.index, 1);
    items.splice(result.destination.index, 0, reorderedItem);

    SetLocations(items);
  }

  return (
    <>
      <DragDropContext onDragEnd={handleOnDragEnd}>
        <Droppable droppableId="locations">
          {(provided) => (
            <Box {...provided.droppableProps} ref={provided.innerRef}>
              {locations.map((location, index) => {
                return (
                  <Draggable
                    key={location.id}
                    draggableId={location.id}
                    index={index}
                  >
                    {(provided) => (
                      <Box
                        {...provided.draggableProps}
                        {...provided.dragHandleProps}
                        ref={provided.innerRef}
                      >
                        <ElementPolygon location={location} index={index} />
                      </Box>
                    )}
                  </Draggable>
                );
              })}
              {provided.placeholder}
            </Box>
          )}
        </Droppable>
      </DragDropContext>
    </>
  );
}
  • Вопрос задан
  • 290 просмотров
Подписаться 1 Простой Комментировать
Решения вопроса 1
@GeorgeKay Автор вопроса
droppableId и draggableId должны быть строками

draggableId={`${location.id}`}
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы