我如何将一个项目从一个容器拖到另一个容器？

Question

我安装了react-bootstrap bootstrap并安装了@dnd-kit/core @dnd-kit/utilities @dnd-kit/sortable。我正在尝试在 React 中进行拖放操作，我可以将容器中的一个项目拖动到另一个容器中，而无需使用 Tailwind.css。

import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import Container from 'react-bootstrap/Container';
import {
  DndContext,
  closestCenter
} from "@dnd-kit/core";
import {
  arrayMove,
  SortableContext,
  verticalListSortingStrategy
} from "@dnd-kit/sortable";
import { useState } from 'react';
import { SortableItem } from './SortableItem';

const Box = ({ children }) => (
  <div style={{ border: '1px solid #ccc', padding: '10px', marginBottom: '20px' }}>
    {children}
  </div>
);

function App() {
  const [languages, setLanguages] = useState(["Test1", "test2", "test3"]);
  const [languages2, setOtherLanguages2] = useState(["Test4", "test5", "test6"]);

  function handleDragEnd(event) {
    console.log("Drag end called");
    const { active, over } = event;
    console.log("ACTIVE: " + active.id);
    console.log("OVER :" + over.id);

    if (active.id !== over.id) {
      setLanguages((items) => {
        const newItems = arrayMove(items, items.indexOf(active.id), items.indexOf(over.id));
        console.log(newItems);
        return newItems;
      });

      setOtherLanguages2((items) => {
        const newItems = arrayMove(items, items.indexOf(active.id), items.indexOf(over.id));
        console.log(newItems);
        return newItems;
      });
    }
  }

  return (
    <DndContext
      collisionDetection={closestCenter}
      onDragEnd={handleDragEnd}
    >
      <div style={{ display: 'flex', justifyContent: 'space-between' }}>
        <Container className="p-3" style={{ "width": "48%" }} align="center">
          <h3>Primeiro</h3>
          <Box>
            <SortableContext
              items={languages}
              strategy={verticalListSortingStrategy}
            >

              {languages.map(language => <SortableItem key={language} id={language} />)}
            </SortableContext>
          </Box>
        </Container>
    
        <Container className="p-3" style={{ "width": "48%" }} align="center">
          <h3>Segundo</h3>
          <Box>
            <SortableContext
              items={languages2}
              strategy={verticalListSortingStrategy}
            >
              
              {languages2.map(language => <SortableItem key={language} id={language} />)}
            </SortableContext>
          </Box>
        </Container>
      </div>
    </DndContext>
  );
  }
  export default App; 

问题是我不知道我可以尝试什么，因为刚刚找到的拖放与 Tailwind 结合在一起，我不想使用它。

Answer 1

您可以尝试使用像React-Grid-Layout这样的库。它不需要使用 Tailwind CSS。

您可以参考此处的文档：https://github.com/react-grid-layout/react-grid-layout#react-grid-layout并尝试此处的演示：https://react- grid-layout.github.io/react-grid-layout/examples/15-drag-from-outside.html