0

estou com dificuldade em implementar um Drag in Drop em uma aplicação, eu preciso arrastar as tasks de uma box para a outra, o código está funcionando de maneira que eu já consigo mover para cima ou para baixo, mas não consegui implementar uma box ao lado que seja possível arrastar e largar, alguma boa alma pode me dar alguma dica? Obrigado!

Componente App.jsx:

import { useState } from "react";

import "./App.css";

import {
  DndContext,
  KeyboardSensor,
  PointerSensor,
  TouchSensor,
  closestCorners,
  useSensor,
  useSensors,
} from "@dnd-kit/core";
import Column from "./components/column/Column";
import { arrayMove, sortableKeyboardCoordinates } from "@dnd-kit/sortable";

export default function App() {
  const [tasks, setTasks] = useState([
    { id: 1, title: "Add tests to homepage" },
    { id: 2, title: "Fix styling in about section" },
    { id: 3, title: "Learn how to create" },
    { id: 4, title: "Learn how to create" },
    { id: 5, title: "Learn how to create" },
    { id: 6, title: "Learn how to create" },
  ]);

  // função que permite manter o local onde foi solto

  const getTaskPos = (id) => tasks.findIndex((task) => task.id === id);

  const handleDragEnd = (event) => {
    const { active, over } = event;
    if (active.id === over.id) return;

    setTasks((tasks) => {
      const originalPos = getTaskPos(active.id);
      const newPos = getTaskPos(over.id);

      return arrayMove(tasks, originalPos, newPos);
    });
  };

  // lógica que permite o uso em mobile

  const sensors = useSensors(
    useSensor(PointerSensor),
    useSensor(TouchSensor),
    useSensors(KeyboardSensor),
    {
      coordinateGetter: sortableKeyboardCoordinates,
    }
  );

  return (
    <div className="App">
      <h1>My task</h1>
      <DndContext onDragEnd={handleDragEnd} collisionDetection={closestCorners}>
        <Column tasks={tasks} />
      </DndContext>
    </div>
  );
}

Componente Column.jsx:

import Task from "../Task/Task";
import "./Column.css";
import {
  SortableContext,
  verticalListSortingStrategy,
} from "@dnd-kit/sortable";

const Column = ({ tasks }) => {
  return (
    <div className="column">
      <SortableContext items={tasks} strategy={verticalListSortingStrategy}>
        {tasks.map((task) => (
          <Task id={task.id} title={task.title} key={task.id} />
        ))}
      </SortableContext>
    </div>
  );
};

export default Column;

Componente Task.jsx:

import "./Task.css";

import { useSortable } from "@dnd-kit/sortable";
import { CSS } from "@dnd-kit/utilities";

export const Task = ({ id, title }) => {
  const { attributes, listeners, setNodeRef, transform, transition } =
    useSortable({ id });

  const style = {
    transition,
    transform: CSS.Transform.toString(transform),
  };

  return (
    <div
      ref={setNodeRef}
      {...attributes}
      {...listeners}
      style={style}
      className="task"
    >
      <input type="checkbox" className="checkbox" />
      {title}
    </div>
  );
};

export default Task;

inserir a descrição da imagem aqui

0

Você deve fazer log-in para responder a esta pergunta.

Pesquise outras perguntas com a tag .