react Draggable 实现多个标签排序

要使用 react-draggable 实现多个标签的排序，可以通过以下步骤来实现：

1. 在父组件中定义一个数组，用于存放所有的标签，每个标签需要包含一个唯一的 id 属性和一个 text 属性。
2. 使用 map() 方法将数组中的每个标签渲染为一个子组件，并将 id 和 text 作为 props 传递给子组件。
3. 在子组件中使用 react-draggable 包装标签内容，使其成为可拖动的元素。
4. 在每个子组件的拖动结束时，获取当前标签的 id 和拖动结束后的位置信息，并更新父组件中保存的标签数组的顺序。
5. 在父组件中使用数组的顺序重新渲染所有标签，实现多个标签的排序效果。

以下是一个简单的示例代码：

import React, { useState } from "react";
import Draggable from "react-draggable";

function Tag({ id, text, onDragStop }) {
  const [position, setPosition] = useState({ x: 0, y: 0 });

  const handleDrag = (e, { x, y }) => {
    setPosition({ x, y });
  };

  const handleDragStop = () => {
    onDragStop(id, position);
  };

  return (
    <Draggable
      position={position}
      onDrag={handleDrag}
      onStop={handleDragStop}
    >
      <div className="tag">{text}</div>
    </Draggable>
  );
}

function TagList() {
  const [tags, setTags] = useState([
    { id: 1, text: "Tag 1" },
    { id: 2, text: "Tag 2" },
    { id: 3, text: "Tag 3" },
    { id: 4, text: "Tag 4" },
  ]);

  const handleTagDragStop = (id, position) => {
    const newTags = [...tags];
    const index = newTags.findIndex((tag) => tag.id === id);
    newTags[index].position = position;
    newTags.sort((a, b) => a.position.y - b.position.y);
    setTags(newTags);
  };

  return (
    <div className="tag-list">
      {tags.map((tag) => (
        <Tag
          key={tag.id}
          id={tag.id}
          text={tag.text}
          onDragStop={handleTagDragStop}
        />
      ))}
    </div>
  );
}

在上面的示例代码中，TagList 组件包含了一个 Tag 组件列表，每个 Tag 组件都通过 react-draggable 包装成了可拖动的元素。在每个 Tag 组件的拖动结束时，会调用 handleTagDragStop() 方法，该方法会更新标签数组的顺序并重新渲染所有标签。