material-ui 版本v5.12.2 可拖拽标签的组件

你可以使用 Material-UI 官方提供的 `Draggable` 组件来实现可拖拽标签的功能。具体实现步骤如下：

1. 首先安装 `react-draggable` 和 `@types/react-draggable` 依赖，可以使用以下命令进行安装：

npm install react-draggable @types/react-draggable

2. 导入 `Draggable` 组件和相关类型：

import { Draggable, DraggableData, DraggableEvent } from 'react-draggable';

3. 在组件中使用 `Draggable` 组件，并设置相关参数：

<Draggable
  axis="both" // 设置拖拽的方向，可选值为 "x"、"y"、"both"，默认为 "both"
  handle=".handle" // 设置拖拽的把手元素，可选值为 CSS 选择器字符串或 DOM 元素
  defaultPosition={{ x: 0, y: 0 }} // 设置拖拽的初始位置
  grid={[20, 20]} // 设置拖拽的网格大小，数组第一个值为 x 方向的网格大小，第二个值为 y 方向的网格大小
  onStart={handleStart} // 拖拽开始时调用的回调函数
  onDrag={handleDrag} // 拖拽进行中调用的回调函数
  onStop={handleStop} // 拖拽结束时调用的回调函数
>
  <div className="handle">拖拽把手</div>
  <div>可拖拽的内容</div>
</Draggable>

其中，`onStart`、`onDrag` 和 `onStop` 回调函数分别接受两个参数：`event` 和 `data`，分别代表拖拽事件和拖拽数据。你可以在这些回调函数中实现自己的逻辑。

4. 根据需求自定义样式，例如可以使用以下样式使拖拽把手显示为一个标签：

.handle {
  cursor: move;
  padding: 4px 8px;
  background-color: #f5f5f5;
  border: 1px solid #ccc;
  border-radius: 4px;
}

以上就是使用 Material-UI 实现可拖拽标签的组件的基本步骤，你可以根据自己的需求进行进一步的定制。