From c030421d747a89554da8efacc83b2581afbab91b Mon Sep 17 00:00:00 2001
From: "DESKTOP-OA0GOUU\\darks" <darksoulstep@gmail.com>
Date: Mon, 1 Apr 2024 02:04:59 +0900
Subject: [PATCH] =?UTF-8?q?HTML5=E3=81=AEDnD=20API=E3=82=82=E3=81=86?=
 =?UTF-8?q?=E3=81=A1=E3=82=87=E3=81=A3=E3=81=A8=E9=96=8B=E6=8B=93=E3=81=97?=
 =?UTF-8?q?=E3=81=9F=E3=81=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/dnd/HTML5.tsx | 68 +++++++++++++++++++++++------------------
 1 file changed, 39 insertions(+), 29 deletions(-)

diff --git a/src/pages/dnd/HTML5.tsx b/src/pages/dnd/HTML5.tsx
index 77e4d0c..6d6ac1a 100644
--- a/src/pages/dnd/HTML5.tsx
+++ b/src/pages/dnd/HTML5.tsx
@@ -1,35 +1,47 @@
 import type React from 'react';
-import { type FC, memo, useState } from 'react';
+import { type FC, memo, useCallback, useState } from 'react';
 import { H1 } from '../../components/heading/H1';
 
 const Component: FC = () => {
     const [isDragging, setIsDragging] = useState(false);
     const [isDroppable, setIsDroppable] = useState(false);
 
-    const onDragStart = (e: React.DragEvent<HTMLDivElement>) => {
-        setIsDragging(true);
-        e.dataTransfer.setData('text/plain', e.currentTarget.id);
-        e.dataTransfer.dropEffect = 'move';
-    };
-    const onDragEnd = () => {
+    const handleDragStart = useCallback(
+        (e: React.DragEvent<HTMLDivElement>) => {
+            setIsDragging(true);
+            e.dataTransfer.setData('text/plain', e.currentTarget.id);
+            e.dataTransfer.dropEffect = 'move';
+        },
+        [],
+    );
+    const handleDrag = useCallback((_: React.DragEvent<HTMLDivElement>) => {
+        // console.log('dragging', e);
+    }, []);
+    const handleDragEnd = useCallback(() => {
         setIsDragging(false);
-    };
+    }, []);
 
-    const onDragEnter = (e: React.DragEvent<HTMLDivElement>) => {
-        if (e.currentTarget.id === 'drop-area') {
-            setIsDroppable(true);
-        }
-    };
-    const onDragLeave = (e: React.DragEvent<HTMLDivElement>) => {
-        if (e.currentTarget.id === 'drop-area') {
-            setIsDroppable(false);
-        }
-    };
-    const onDrop = (e: React.DragEvent<HTMLDivElement>) => {
+    const handleDragEnter = useCallback(
+        (e: React.DragEvent<HTMLDivElement>) => {
+            if (e.currentTarget.id === 'drop-area') {
+                setIsDroppable(true);
+            }
+        },
+        [],
+    );
+    const handleDragLeave = useCallback(
+        (e: React.DragEvent<HTMLDivElement>) => {
+            if (e.currentTarget.id === 'drop-area') {
+                setIsDroppable(false);
+            }
+        },
+        [],
+    );
+    const handleDrop = useCallback((e: React.DragEvent<HTMLDivElement>) => {
         if (e.currentTarget.id === 'drop-area') {
             setIsDroppable(false);
         }
-    };
+    }, []);
 
     return (
         <>
@@ -41,9 +53,9 @@ const Component: FC = () => {
                     backgroundColor: isDragging ? 'red' : 'gray',
                 }}
                 draggable
-                onDragStart={onDragStart}
-                onDragEnd={onDragEnd}
-                // onDrag={(e) => console.log('on drag', e)} // ドラッグ中に発火するだけで未使用でもOK
+                onDragStart={handleDragStart}
+                onDragEnd={handleDragEnd}
+                onDrag={handleDrag}
             >
                 drag item
             </div>
@@ -54,12 +66,10 @@ const Component: FC = () => {
                     width: 128,
                     backgroundColor: isDroppable ? 'green' : 'darkgray',
                 }}
-                onDragEnter={onDragEnter}
-                onDragLeave={onDragLeave}
-                onDragOver={e => {
-                    e.preventDefault(); // これがないとdropイベントが発火しない
-                }}
-                onDrop={onDrop}
+                onDragEnter={handleDragEnter}
+                onDragLeave={handleDragLeave}
+                onDragOver={e => e.preventDefault()} // これがないとdropイベントが発火しない
+                onDrop={handleDrop}
             >
                 drop area
             </div>