form-driver 0.4.21 → 0.4.22

package/src/ui/widget/SortDrag.less

@@ -1,32 +1,97 @@
 .sortDrag {
   .dragItem {
     display: flex;
+    align-items: center;
     justify-content: space-between;
-    padding: 4px 8px;
+    padding: 0 4px;
     background: #fff;
-    // border: 1px solid #d9d9d9;
-    // border-radius: 4px;
-    // box-shadow: 0 1px 2px #00000008;
     font-size: 14px;
-    transition: background 0.2s, box-shadow 0.2s;
+    transition: background 0.15s ease, box-shadow 0.15s ease;
+    cursor: default;
+    user-select: none;
+    -webkit-user-select: none;
+    // 拖拽中占位符状态
+    &.dragging {
+      background: #fafafa;
+    }
+  }
+
+  .dragHandleWrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 36px;
+    min-height: 36px;
     cursor: grab;
+    margin-left: 2px;
+    border-radius: 4px;
+    touch-action: none;
+    -webkit-touch-callout: none;
+    transition: background 0.15s ease;
 
-    // 拖拽中状态
-    &.dragging {
-      background: #bae7ff;
-      box-shadow: 0 2px 8px #1890ff33;
+    &:hover {
+      background: #f5f5f5;
     }
 
-    // 拖拽悬停状态
-    &.dropping {
-      background: #f2f2f2;
+    &:active {
+      cursor: grabbing;
+      background: #e8e8e8;
+
+      .dragHandleIcon {
+        color: #1890ff;
+      }
     }
   }
 
+  .dragHandleIcon {
+    font-size: 16px;
+    color: #bfbfbf;
+    transition: color 0.15s ease;
+  }
+
   .dragBody {
     flex: 1;
+    min-height: 0;
   }
+
   .dragHandle {
-    width: 40px;
+    width: 36px;
+  }
+}
+
+// ========== 拖拽预览 — 简洁浮动卡片 ==========
+.sortDrag-overlay {
+  .sortDrag-overlay-inner {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 4px 8px;
+    background: #ffffff;
+    border-radius: 8px;
+    box-shadow:
+      0 1px 3px rgba(0, 0, 0, 0.08),
+      0 8px 24px rgba(0, 0, 0, 0.12);
+    border: 1px solid rgba(0, 0, 0, 0.06);
+
+    .dragBody {
+      flex: 1;
+    }
+  }
+
+  .sortDrag-overlay-handle {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    border-radius: 4px;
+    background: #f0f0f0;
+    margin-left: 6px;
+    flex-shrink: 0;
+  }
+
+  .sortDrag-overlay-handleIcon {
+    font-size: 14px;
+    color: #8c8c8c;
   }
 }

package/src/ui/widget/SortDrag.tsx

@@ -1,8 +1,7 @@
-import React, { memo, useRef, useEffect, useState, ReactNode } from "react";
-import { draggable } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
-import { dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
-import { monitorForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
-import { Button } from "antd";
+import React, { memo, useState, useEffect, ReactNode } from "react";
+import { DndContext, closestCenter, DragOverlay, DragStartEvent, DragEndEvent, PointerSensor, TouchSensor, KeyboardSensor, useSensor, useSensors } from "@dnd-kit/core";
+import { SortableContext, useSortable, arrayMove, verticalListSortingStrategy, sortableKeyboardCoordinates } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
 import { HolderOutlined } from "@ant-design/icons";
 import clsx from "clsx";
 
@@ -19,113 +18,130 @@ type SortDragProps = {
   }>;
 };
 
+const SortableItem: React.FC<{
+  item: SortDragProps["sortList"][0];
+}> = memo(({ item }) => {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({
+    id: item.id,
+    disabled: !item.isChecked,
+  });
+
+  const style: React.CSSProperties = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0 : 1,
+  };
+
+  const itemClass = clsx("dragItem", {
+    dragging: isDragging,
+  });
+
+  return (
+    <div
+      className={itemClass}
+      ref={setNodeRef}
+      style={style}
+    >
+      <div className="dragBody">{item.cpn}</div>
+      <div>
+        {item.isChecked ? (
+          <div
+            className="dragHandleWrapper"
+            {...attributes}
+            {...listeners}
+          >
+            <HolderOutlined className="dragHandleIcon" />
+          </div>
+        ) : null}
+      </div>
+    </div>
+  );
+});
+
+SortableItem.displayName = "SortableItem";
+
 const SortDrag: React.FC<SortDragProps> = memo((props) => {
   const { sortList, changeOriginDataSource } = props;
   const [items, setItems] = useState<SortDragProps["sortList"]>(sortList);
+  const [activeId, setActiveId] = useState<string | null>(null);
 
-  // 记录当前拖拽的 item id
-  const [draggingId, setDraggingId] = useState<string | null>(null);
-  // 记录当前 hover 的 Id
-  const [droppingId, setDroppingId] = useState<string | null>(null);
-  // refs 用于绑定每个 item 的 DOM
-  const itemRefs = useRef<Record<string, HTMLDivElement | null>>({});
-  // 修改：为每个 item 单独管理 dragHandle ref
-  const dragHandleRefs = useRef<Record<string, HTMLSpanElement | null>>({});
-
-  // 注册拖拽和 drop target
+  // 同步外部 sortList 变化到内部状态
   useEffect(() => {
-    // 清理函数集合
-    const cleanups: (() => void)[] = [];
-    items.forEach((item, idx) => {
-      const el = itemRefs.current[item.id];
-      if (!el) return;
-      // 注册为 draggable
-      cleanups.push(
-        draggable({
-          element: el,
-          dragHandle: dragHandleRefs.current[item.id],
-          canDrag: () => item.isChecked,
-          getInitialData: () => ({
-            id: item.id,
-            index: idx,
-            label: item.label,
-          }),
-          onDragStart: () => setDraggingId(item.id),
-          onDrop: () => setDraggingId(null),
-        })
-      );
-      // 注册为 drop target
-      cleanups.push(
-        dropTargetForElements({
-          element: el,
-          canDrop: () => item.isChecked,
-          onDragEnter: (args) => {
-            const fromIdx = items.findIndex(
-              (i) => i.id === args.source.data.id
-            );
-            if (fromIdx === idx) return;
-            console.log("当前hover元素", item.id);
-            console.log("当前拖拽元素", args);
-            setDroppingId(item.id);
-          },
-          onDragLeave: () => {
-            setDroppingId(null);
-          },
-          onDrop: ({ source }) => {
-            // console.log("当前拖拽元素", source);
-            if (!source) return;
-            const fromIdx = items.findIndex((i) => i.id === source.data.id);
-            const toIdx = idx;
-            if (fromIdx === -1 || fromIdx === toIdx) return;
-            const newItems = [...items];
-            const [moved] = newItems.splice(fromIdx, 1);
-            newItems.splice(toIdx, 0, moved);
-            console.log("排序之后的数据", newItems);
-            setItems(newItems);
-
-            changeOriginDataSource(newItems);
-            setDroppingId(null);
-          },
-        })
-      );
-    });
-    // 监听全局拖拽，拖拽结束时清理 draggingId
-    const monitorCleanup = monitorForElements({
-      onDrop: () => setDraggingId(null),
-    });
-    cleanups.push(monitorCleanup);
-    return () => {
-      cleanups.forEach((fn) => fn());
-    };
-  }, [items]);
+    setItems(sortList);
+  }, [sortList]);
+
+  const sensors = useSensors(
+    useSensor(TouchSensor, {
+      activationConstraint: {
+        delay: 200,
+        tolerance: 5,
+      },
+    }),
+    useSensor(PointerSensor, {
+      activationConstraint: {
+        distance: 10,
+      },
+    }),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    })
+  );
+
+  const handleDragStart = (event: DragStartEvent) => {
+    setActiveId(event.active.id as string);
+  };
+
+  const handleDragEnd = (event: DragEndEvent) => {
+    const { active, over } = event;
+    setActiveId(null);
+
+    if (!over || active.id === over.id) return;
+
+    const oldIndex = items.findIndex((item) => item.id === active.id);
+    const newIndex = items.findIndex((item) => item.id === over.id);
+    if (oldIndex === -1 || newIndex === -1) return;
+
+    const newItems = arrayMove(items, oldIndex, newIndex);
+    setItems(newItems);
+    changeOriginDataSource(newItems);
+  };
+
+  const activeItem = items.find((item) => item.id === activeId);
 
   return (
-    <div className="sortDrag">
-      {items.map((item, index) => {
-        const itemClass = clsx("dragItem", {
-          dragging: draggingId === item.id,
-          dropping: droppingId === item.id,
-        });
-
-        return (
-          <div
-            className={itemClass}
-            ref={(el) => (itemRefs.current[item.id] = el)}
-            key={item.id}
-          >
-            <div className="dragBody">{item.cpn}</div>
-            <div>
-              {item.isChecked ? (
-                <HolderOutlined
-                  ref={(el) => (dragHandleRefs.current[item.id] = el)}
-                  style={{ cursor: "grab", marginLeft: "8px" }}
-                />
-              ) : null}
+    <DndContext
+      sensors={sensors}
+      collisionDetection={closestCenter}
+      onDragStart={handleDragStart}
+      onDragEnd={handleDragEnd}
+    >
+      <SortableContext items={items} strategy={verticalListSortingStrategy}>
+        <div className="sortDrag">
+          {items.map((item) => (
+            <SortableItem key={item.id} item={item} />
+          ))}
+        </div>
+      </SortableContext>
+      <DragOverlay dropAnimation={null}>
+        {activeItem ? (
+          <div className="sortDrag-overlay">
+            <div className="sortDrag-overlay-inner">
+              <div className="dragBody">{activeItem.cpn}</div>
+              <div className="sortDrag-overlay-handle">
+                <HolderOutlined className="sortDrag-overlay-handleIcon" />
+              </div>
             </div>
           </div>
-        );
-      })}
-    </div>
+        ) : null}
+      </DragOverlay>
+    </DndContext>
   );
 });
 

package/types/ui/widget/EnhancedSortDrag.d.ts

@@ -1,5 +1,7 @@
 import React, { ReactNode } from "react";
+import type { SyntheticListenerMap } from "@dnd-kit/core/dist/hooks/utilities";
 import "./EnhancedSortDrag.less";
+type DndListeners = SyntheticListenerMap | undefined;
 /**
  * 拖拽项数据类型定义
  */
@@ -27,7 +29,7 @@ export interface EnhancedSortDragProps {
     /** 拖拽失败回调 */
     onDragFail?: (error: DragError) => void;
     /** 自定义拖拽句柄渲染 */
-    renderDragHandle?: (item: DragItem, isDragging: boolean) => ReactNode;
+    renderDragHandle?: (item: DragItem, isDragging: boolean, listeners?: DndListeners) => ReactNode;
     /** 拖拽预览内容 */
     renderDragPreview?: (item: DragItem) => ReactNode;
     /** 是否为表格行模式 */