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;