Können Sie mir bitte kleine Code-Snippet für React Funktionskomponente schreiben, die zwei divs hat und jedes div mehrere Elemente in sich hat, Quelle von Artikeln ist ein Array, auch sollte jedes Element zwischen zwei divs ziehen & Drop sein?
Here's a sample code for a React functional component with two divs that have items inside of them. The items are obtained from an array and each item can be dragged and dropped between the two divs:

'''javascript
import React, { useState } from "react";

const App = () => {
  const [list1, setList1] = useState([
    { id: 1, text: "Item 1" },
    { id: 2, text: "Item 2" },
    { id: 3, text: "Item 3" }
  ]);
  const [list2, setList2] = useState([
    { id: 4, text: "Item 4" },
    { id: 5, text: "Item 5" }
  ]);

  const onDragStart = (event, source) => {
    event.dataTransfer.setData("source", source);
  };

  const onDrop = (event, target) => {
    const source = event.dataTransfer.getData("source");
    const sourceList = source === "list1" ? list1 : list2;
    const targetList = target === "list1" ? list1 : list2;
    const item = sourceList.find(i => i.id === Number(event.dataTransfer.getData("id")));

    setList1(source === "list1" && target === "list2" ? sourceList.filter(i => i.id !== item.id) : list1);
    setList2(source === "list2" && target === "list1" ? sourceList.filter(i => i.id !== item.id) : list2);
    targetList.push(item);

    target === "list1" ? setList1([...targetList]) : setList2([...targetList]);
  };

  return (
    <div className="container">
      <div
        className="list"
        onDrop={event => onDrop(event, "list1")}
        onDragOver={event => event.preventDefault()}
      >
        {list1.map(item => (
          <div
            key={item.id}
            className="item"
            draggable
            onDragStart={event => onDragStart(event, "list1")}
            data-id={item.id}
          >
            {item.text}
          </div>
        ))}
      </div>
      <div
        className="list"
        onDrop={event => onDrop(event, "list2")}
        onDragOver={event => event.preventDefault()}
      >
        {list2.map(item => (
          <div
            key={item.id}
            className="item"
            draggable
            onDragStart={event => onDragStart(event, "list2")}
            data-id={item.id}
          >
            {item.text}
          </div>
        ))}
      </div>
    </div>
  );
};

export default App;
'''