demo: add draggable tag demo (#41471)

* feat: add draggable tag demo

* fix: use Typography and optimize ui

* fix: remove the omit function

* retain only dnd functionality

* fix: fix eslint error and optimize import sentence

* fix: optimize drag and docs

components/tag/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -1182,6 +1182,44 @@ Array [
 ]
 `;
 
+exports[`renders components/tag/demo/draggable.tsx extend context correctly 1`] = `
+Array [
+  <span
+    class="ant-tag"
+    style="cursor: move; transition: unset;"
+  >
+    Tag 1
+  </span>,
+  <span
+    class="ant-tag"
+    style="cursor: move; transition: unset;"
+  >
+    Tag 2
+  </span>,
+  <span
+    class="ant-tag"
+    style="cursor: move; transition: unset;"
+  >
+    Tag 3
+  </span>,
+  <div
+    id="DndDescribedBy-1"
+    style="display: none;"
+  >
+    To pick up a draggable item, press the space bar.
+    While dragging, use the arrow keys to move the item.
+    Press space again to drop the item in its new position, or press escape to cancel.
+  </div>,
+  <div
+    aria-atomic="true"
+    aria-live="assertive"
+    id="DndLiveRegion-1"
+    role="status"
+    style="position: fixed; width: 1px; height: 1px; margin: -1px; border: 0px; padding: 0px; overflow: hidden; clip-path: inset(100%); white-space: nowrap;"
+  />,
+]
+`;
+
 exports[`renders components/tag/demo/icon.tsx extend context correctly 1`] = `
 <div
   class="ant-space ant-space-horizontal ant-space-align-center"

components/tag/__tests__/__snapshots__/demo.test.ts.snap

@@ -1182,6 +1182,29 @@ Array [
 ]
 `;
 
+exports[`renders components/tag/demo/draggable.tsx correctly 1`] = `
+Array [
+  <span
+    class="ant-tag"
+    style="cursor:move;transition:unset"
+  >
+    Tag 1
+  </span>,
+  <span
+    class="ant-tag"
+    style="cursor:move;transition:unset"
+  >
+    Tag 2
+  </span>,
+  <span
+    class="ant-tag"
+    style="cursor:move;transition:unset"
+  >
+    Tag 3
+  </span>,
+]
+`;
+
 exports[`renders components/tag/demo/icon.tsx correctly 1`] = `
 <div
   class="ant-space ant-space-horizontal ant-space-align-center"

components/tag/demo/draggable.md

@@ -0,0 +1,7 @@
+## zh-CN
+
+使用 [dnd kit](https://dndkit.com) 实现的可拖拽标签。
+
+## en-US
+
+Draggable tags using [dnd kit](https://dndkit.com).

components/tag/demo/draggable.tsx

@@ -0,0 +1,89 @@
+import React, { useState } from 'react';
+import { Tag } from 'antd';
+import { DndContext, PointerSensor, useSensor, useSensors, closestCenter } from '@dnd-kit/core';
+import {
+  arrayMove,
+  useSortable,
+  SortableContext,
+  horizontalListSortingStrategy,
+} from '@dnd-kit/sortable';
+import type { FC } from 'react';
+import type { DragEndEvent } from '@dnd-kit/core/dist/types/index';
+
+type Item = {
+  id: number;
+  text: string;
+};
+
+type DraggableTagProps = {
+  tag: Item;
+};
+
+const DraggableTag: FC<DraggableTagProps> = (props) => {
+  const { tag } = props;
+  const { listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id: tag.id });
+
+  const commonStyle = {
+    cursor: 'move',
+    transition: 'unset', // 防止拖拽完毕之后元素抖动
+  };
+
+  const style = transform
+    ? {
+        ...commonStyle,
+        transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,
+        transition: isDragging ? 'unset' : transition, // 处理拖拽中的元素不跟手的问题
+      }
+    : commonStyle;
+
+  return (
+    <Tag style={style} ref={setNodeRef} {...listeners}>
+      {tag.text}
+    </Tag>
+  );
+};
+
+const App = () => {
+  const [items, setItems] = useState<Item[]>([
+    {
+      id: 1,
+      text: 'Tag 1',
+    },
+    {
+      id: 2,
+      text: 'Tag 2',
+    },
+    {
+      id: 3,
+      text: 'Tag 3',
+    },
+  ]);
+
+  const sensors = useSensors(useSensor(PointerSensor));
+
+  const handleDragEnd = (event: DragEndEvent) => {
+    const { active, over } = event;
+    if (!over) return;
+
+    if (active.id !== over.id) {
+      setItems((data) => {
+        const oldIndex = data.findIndex((item) => item.id === active.id);
+        const newIndex = data.findIndex((item) => item.id === over.id);
+
+        return arrayMove(data, oldIndex, newIndex);
+      });
+    }
+  };
+
+  return (
+    <DndContext sensors={sensors} onDragEnd={handleDragEnd} collisionDetection={closestCenter}>
+      <SortableContext items={items} strategy={horizontalListSortingStrategy}>
+        {items.map((item) => (
+          <DraggableTag tag={item} key={item.id} />
+        ))}
+      </SortableContext>
+    </DndContext>
+  );
+};
+
+export default App;

components/tag/index.en-US.md

@@ -30,6 +30,7 @@ Tag for categorizing or markup.
 <code src="./demo/borderless.tsx">borderless</code>
 <code src="./demo/borderlessLayout.tsx" debug>borderless in layout</code>
 <code src="./demo/customize.tsx" debug>Customize close</code>
+<code src="./demo/draggable.tsx">Draggable Tag</code>
 
 ## API
 

components/tag/index.zh-CN.md

@@ -30,6 +30,7 @@ demo:
 <code src="./demo/borderless.tsx">无边框</code>
 <code src="./demo/borderlessLayout.tsx" debug>深色背景中无边框</code>
 <code src="./demo/customize.tsx" debug>自定义关闭按钮</code>
+<code src="./demo/draggable.tsx">可拖拽标签</code>
 
 ## API