Reaccionar Dnd
React DnD es un conjunto de utilidades de React que lo ayudan a crear interfaces complejas de arrastrar y soltar mientras mantiene los componentes desacoplados. Es perfecto para aplicaciones como Trello y Storify, donde arrastrar transfiere datos entre diferentes partes de la aplicación y los componentes cambian su apariencia y el estado de la aplicación en función de los eventos de arrastrar y soltar.
Arrastrar y soltar es inherentemente con estado. Hay una operación de arrastre en curso o no. O hay un tipo actual y un elemento actual, o no lo hay.
React DnD expone este estado a sus componentes a través de un par de pequeños envoltorios sobre un almacén de estado interno llamado monitores. Los monitores le permiten actualizar las propiedades de un componente en respuesta a los cambios de estado de arrastrar y soltar.
usar:
npm install react-dnd react-dnd-html5-backend
Dirección del sitio web oficial: https://react-dnd.github.io/react-dnd/about
Caso sencillo:
Este caso está escrito utilizando el entorno de tecnología React.
Arrastre y suelte los elementos que se pueden arrastrar del cuadro 1 al cuadro 2, y arrastre y suelte los elementos del cuadro 2 al cuadro 1.
En el desarrollo real, el componente Arrastrable y el componente Soltable están en archivos separados. Este es solo un caso simple, y todos están en un archivo para mayor comodidad.
import React from 'react';
import {
DndProvider, useDrag, useDrop } from 'react-dnd';
import {
HTML5Backend } from 'react-dnd-html5-backend';
const Code: React.FC = () => {
// 设置动态拖拽数据
const [box1, setBox1] = React.useState([
{
id: 1 }, {
id: 2 }, {
id: 3 },
])
const [box2, setBox2] = React.useState([{
id: 1 }]);
// 可拖拽的元素
function Draggable({
id }) {
const [{
isDragging }, drag] = useDrag(() => ({
type: "card",
item: {
id },
collect: (monitor) => ({
isDragging: monitor.isDragging(),
}),
}))
if (isDragging) {
return <div ref={
drag}></div>
}
return <div id='drap' style={
{
"margin": "8px", "width": "50px", "background": "rgb(118 208 235)" ,"display":"inline-block"}} ref={
drag}>{
`Drag ${
id}`}</div>
}
// 存放拖拽元素的容器
function Droppable({
handleDrop, state, text ,children}) {
const [{
isDver }, drop] = useDrop(() => ({
accept: "card", // 接收的类型，和useDrag中type对应
collect: (monitor) => ({
isDver: monitor.isOver(),
}),
drop: (item: any) => {
handleDrop(item)
console.log(item)
}
}), [state])
return <div id='drop' ref={
drop} style={
{
"padding": "10px", "width": "320px", "background": "#fff" }}>
{
text} <br/>
{
children}
</div>
}
const handleDrop1 = (item) =>{
// 删除box2
const arrCopy= [...box2];
const index = arrCopy.findIndex((each)=>each.id == item.id)
const copyItem = arrCopy[index];
arrCopy.splice(index,1);
setBox2(arrCopy);
// 在box1中添加
setBox1((prev) => [...prev,copyItem]);
}
const handleDrop2 = (item) =>{
// 删除box2
const arrCopy= [...box1];
const index = arrCopy.findIndex((each)=>each.id == item.id)
const copyItem = arrCopy[index];
arrCopy.splice(index,1);
setBox1(arrCopy);
// 在box1中添加
setBox2((prev) => [...prev,copyItem]);
}
return (
<DndProvider backend={
HTML5Backend}>
{
/* <Draggable id={1}></Draggable>
<Draggable id={2}></Draggable> */}
<Droppable text={
"box1"} state={
box1} handleDrop={
handleDrop1}>
{
box1.map(drag => <Draggable key={
drag.id} id={
drag.id} />)}
</Droppable>
<Droppable text={
"box2"} state={
box2} handleDrop={
handleDrop2}>
{
box2.map(drag => <Draggable key={
drag.id} id={
drag.id} />)}
</Droppable>
</DndProvider>
)
};
export default Code;