bodypositionlist中的示意图可拖拽

src/pages/exam/components/BodyPositionList.tsx

@@ -32,7 +32,7 @@ const BodyPositionList: React.FC<BodyPositionListProps> = ({
     bodyPosition: ExtendedBodyPosition
   ): Promise<void> => {
     console.log(`[BodyPositionList] Single-click on: ${bodyPosition.view_name}`);
-    
+
     // 单击时，禁止自动流程切换
     await manualSelectBodyPositionWithFlowSwitch(
       bodyPosition,
@@ -47,7 +47,7 @@ const BodyPositionList: React.FC<BodyPositionListProps> = ({
     bodyPosition: ExtendedBodyPosition
   ): Promise<void> => {
     console.log(`[BodyPositionList] Double-click on: ${bodyPosition.view_name}`);
-    
+
     // 双击时，允许自动流程切换
     await manualSelectBodyPositionWithFlowSwitch(
       bodyPosition,
@@ -104,12 +104,22 @@ const BodyPositionList: React.FC<BodyPositionListProps> = ({
     setIsAppendModalOpen(false);
   };
 
+  const handleDragStart = (sop_isntance_id, e) => {
+    // 存储序列唯一标识（关键：用于后续加载图像）
+    console.log(`要拖拽的sop isntance uid 是 ${sop_isntance_id}`);
+    e.dataTransfer.setData('seriesInstanceUID', sop_isntance_id);
+    e.dataTransfer.effectAllowed = 'copy'; // 拖拽效果
+  };
+
   return (
     // 父级是flex，这里是grid，grid的高度需要设置为0，并且flex-grow，这样才能不撑开grid
     <div className={`${layout} h-full flex-grow`}>
       <div className="h-full overflow-y-auto flex flex-col ">
         {bodyPositions.map((bodyPosition, index) => (
-          <div key={index} className="relative w-[50%] mx-auto">
+          <div key={index} className="relative w-[50%] mx-auto"
+            draggable
+            onDragStart={(e) => handleDragStart(bodyPosition.sop_instance_uid, e)}
+          >
             <ImageViewer
               src={
                 bodyPosition.dview.expose_status === 'Exposed'
@@ -117,11 +127,10 @@ const BodyPositionList: React.FC<BodyPositionListProps> = ({
                   : getViewIconUrl(bodyPosition.view_icon_name)
               }
               className={`image-viewer-item hover:border-[var(--color-primary)] hover:border-4
-                ${
-                  bodyPosition.sop_instance_uid ===
+                ${bodyPosition.sop_instance_uid ===
                   selectedBodyPosition?.sop_instance_uid
-                    ? 'border-4 border-[var(--color-primary)] '
-                    : ''
+                  ? 'border-4 border-[var(--color-primary)] '
+                  : ''
                 }`}
               onClick={() => handleImageClick(bodyPosition)}
               onDoubleClick={() => handleImageDoubleClick(bodyPosition)}