react可拖拽

提示：可拖拽

---

提示：以下是本篇文章正文内容，下面案例可供参考

1.引入库

代码如下（示例）：

import * as React from 'react'
import {
    
     DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";

const items = [
  {
    
     id: "1", content: "Card 1" },
  {
    
     id: "2", content: "Card 2" },
  {
    
     id: "3", content: "Card 3" },
  {
    
     id: "4", content: "Card 4" }
];

const Card = ({
    
     item, index }) => {
    
    
  return (
    <Draggable draggableId={
    
    item.id} index={
    
    index}>
      {
    
    (provided, snapshot) => (
        <div
          className="card"
          ref={
    
    provided.innerRef}
          {
    
    ...provided.draggableProps}
          {
    
    ...provided.dragHandleProps}
          style={
    
    {
    
    
            backgroundColor: snapshot.isDragging ? "lightblue" : "white",
            ...provided.draggableProps.style
          }}
        >
          {
    
    item.content}
        </div>
      )}
    </Draggable>
  );
};

const CardList = () => {
    
    
  const [cards, setCards] = React.useState(items);

  const onDragEnd = (result) => {
    
    
    if (!result.destination) return;
    const {
    
     source, destination } = result;

    const newCards = Array.from(cards);
    const [removed] = newCards.splice(source.index, 1);
    newCards.splice(destination.index, 0, removed);

    setCards(newCards);
  };

  return (
    <DragDropContext onDragEnd={
    
    onDragEnd}>
      <Droppable droppableId="cards">
        {
    
    (provided) => (
          <div {
    
    ...provided.droppableProps} ref={
    
    provided.innerRef}>
            {
    
    cards.map((card, index) => (
              <Card key={
    
    card.id} item={
    
    card} index={
    
    index} />
            ))}
            {
    
    provided.placeholder}
          </div>
        )}
      </Droppable>
    </DragDropContext>
  );
};

export default CardList;