import React, { useState } from 'react';
import { useDrag, useDrop } from 'react-dnd';
import { ItemTypes } from './ItemTypes';

const style = {
  border: '1px solid gray',
  padding: '0.5rem 1rem',
  marginBottom: '.5rem',
  backgroundColor: 'white',
  cursor: 'move',
};

const Element = ({ id, text, moveElement }) => {
  const [{ isDragging }, drag] = useDrag({
    item: { type: ItemTypes.ELEMENT, id, text },
    collect: (monitor) => ({
      isDragging: monitor.isDragging(),
    }),
  });
  const [, drop] = useDrop({
    accept: ItemTypes.ELEMENT,
    drop: (item) => {
      moveElement(item.id, id);
    },
  });

  return (
    <div ref={(node) => drag(drop(node))} style={{ ...style, opacity: isDragging ? 0.5 : 1 }}>
      {text}
    </div>
  );
};

const Container = ({ elements, moveElement }) => {
  return (
    <div>
      {elements.map((element, index) => (
        <Element key={element.id} id={element.id} text={element.text} moveElement={moveElement} />
      ))}
    </div>
  );
};

const App = () => {
  const [elements1, setElements1] = useState([
    { id: 1, text: 'Element 1' },
    { id: 2, text: 'Element 2' },
    { id: 3, text: 'Element 3' },
  ]);
  const [elements2, setElements2] = useState([
    { id: 4, text: 'Element 4' },
    { id: 5, text: 'Element 5' },
    { id: 6, text: 'Element 6' },
  ]);

  const moveElement = (id, atIndex) => {
    const element = elements1.find((e) => e.id === id);
    const newElements1 = elements1.filter((e) => e.id !== id);
    setElements1(newElements1);
    setElements2((prevElements2) => [...prevElements2.slice(0, atIndex), element, ...prevElements2.slice(atIndex)]);
  };

  return (
    <div style={{ display: 'flex' }}>
      <Container elements={elements1} moveElement={moveElement} />
      <Container elements={elements2} moveElement={moveElement} />
    </div>
  );
};

export default App;

Este código utiliza las funciones y del paquete para lograr la funcionalidad de arrastrar y soltar elementos entre divs. Hay dos contenedores que tienen use Draguse Dropreact- dnd Container
dentro de ellos una matriz de elementos, y cada elemento es representado por un componente . El componente utiliza y para definir su comportamiento de arrastrar y soltar. Element Element use Draguse Drop

En el componente , hay dos estados y que almacenan los elementos en cada contenedor. La función se utiliza para mover un elemento de un contenedor a otro.Appelements1elements2moveElement

Espero que esto te ayude a comprender cómo se puede implementar la funcionalidad de arrastrar y soltar elementos en React.

Si no lo entiendes, este código hace una cosa muy interesante. Es como tener dos cajas y cada caja tiene muchas fichas dentro de ellas. Las fichas son nombres como "Element 1", "Element 2", etc.

Y con este código, podemos tomar una de las fichas y arrastrarla de una caja a otra. Así podemos mover las fichas de una caja a otra.

Es como jugar con bloques, pero en lugar de bloques, estamos moviendo nombres de una caja a otra en la computadora.
นำเข้าปฏิกิริยา { useState } จาก 'ปฏิกิริยา'; นำเข้า { useDrag, useDrop } จาก 'react-dnd'; นำเข้า { ItemTypes } จาก './ItemTypes'; const style = { เส้นขอบ: '1px สีเทาทึบ', ช่องว่างภายใน: '0.5rem 1rem', ขอบล่าง: '.5rem', สีพื้นหลัง: 'สีขาว', เคอร์เซอร์: 'ย้าย', }; องค์ประกอบ const = ({ id, ข้อความ, moveElement }) => { const [{ isDragging }, ลาก] = useDrag({ item: { ประเภท: ItemTypes.ELEMENT, id, text }, รวบรวม: (จอภาพ) => ({ isDragging: monitor.isDragging(), }), }); const [, drop] = useDrop({ ยอมรับ: ItemTypes.ELEMENT, drop: (item) => { moveElement(item.id, id); }, }); return ( <div ref={(node) => Drag(drop(node))} style={{ ...style, opacity: isDragging ? 0.5 : 1 }}> {text} </div> ); }; const Container = ({ องค์ประกอบ, moveElement }) => { กลับ ( <div> {elements.map((องค์ประกอบ, ดัชนี) => ( <Element key={element.id} id={element.id} text={ องค์ประกอบ.ข้อความ} moveElement={moveElement} /> ))} </div> ); }; แอป const = () => { const [elements1, setElements1] = useState([ { id: 1, ข้อความ: 'องค์ประกอบ 1' }, { id: 2, ข้อความ: 'องค์ประกอบ 2' }, { id: 3, ข้อความ : 'องค์ประกอบ 3' }, ]); const [elements2, setElements2] = useState([ { id: 4, ข้อความ: 'องค์ประกอบ 4' }, { id: 5, ข้อความ: 'องค์ประกอบ 5' }, { id: 6, ข้อความ: 'องค์ประกอบ 6' }, ] ); const moveElement = (id, atIndex) => { องค์ประกอบ const = element1.find((e) => e.id === id); const newElements1 = element1.filter((e) => e.id !== id); setElements1 (องค์ประกอบใหม่ 1); setElements2((prevElements2) => [...prevElements2.slice(0, atIndex), องค์ประกอบ, ...prevElements2.slice(atIndex)]); }; กลับ ( <div style={{ display: 'flex' }}> <องค์ประกอบคอนเทนเนอร์={elements1} moveElement={moveElement} /> <องค์ประกอบคอนเทนเนอร์={elements2} moveElement={moveElement} /> </div> ); }; ส่งออกแอปเริ่มต้น รหัสนี้ใช้แพ็คเกจและฟังก์ชันเพื่อให้บรรลุฟังก์ชันการลากและวางระหว่าง div มีสองคอนเทนเนอร์ที่มีคอนเทนเนอร์ Draguse Dropreactdnd อยู่ภายในนั้นประกอบด้วยอาร์เรย์ขององค์ประกอบ และแต่ละองค์ประกอบจะแสดงด้วยส่วนประกอบ ส่วนประกอบใช้และเพื่อกำหนดพฤติกรรมการลากและวาง องค์ประกอบใช้ Draguse Drop ในองค์ประกอบองค์ประกอบมีสองสถานะและเก็บองค์ประกอบไว้ในแต่ละคอนเทนเนอร์ ฟังก์ชันนี้ใช้เพื่อย้ายองค์ประกอบจากคอนเทนเนอร์หนึ่งไปยังอีกคอนเทนเนอร์หนึ่ง Appelements1elements2moveElement ฉันหวังว่าสิ่งนี้จะช่วยให้คุณเข้าใจว่าฟังก์ชันการลากและวางองค์ประกอบสามารถนำไปใช้ใน React ได้อย่างไร หากคุณไม่เข้าใจโค้ดนี้จะมีสิ่งที่น่าสนใจมาก มันเหมือนกับว่ามีกล่องสองใบและแต่ละกล่องก็มีโทเค็นมากมายอยู่ข้างใน โทเค็นมีชื่อเหมือน "องค์ประกอบ 1", "องค์ประกอบ 2" ฯลฯ และด้วยรหัสนี้ เราสามารถนำไทล์อันใดอันหนึ่งแล้วลากจากกล่องหนึ่งไปยังอีกกล่องหนึ่งได้ ด้วยวิธีนี้เราสามารถย้ายชิ้นส่วนจากกล่องหนึ่งไปยังอีกกล่องหนึ่งได้ มันเหมือนกับการเล่นกับบล็อก แต่แทนที่จะเล่นบล็อก เรากำลังย้ายชื่อจากกล่องหนึ่งไปอีกกล่องหนึ่งบนคอมพิวเตอร์
spam fails_task lang_mismatch pii not_appropriate hate_speech sexual_content quality toxicity humor helpfulness creativity violence