From 7c46df1c3026b5d836bc082e5e1dc2cdd093b77c Mon Sep 17 00:00:00 2001
From: Daybrush <younkue.choi@navercorp.com>
Date: Tue, 16 May 2023 01:42:31 +0900
Subject: [PATCH] feat: add drag api demo

---
 .../stories/99-Tests/ReactDragAPIApp.tsx      | 44 +++++++++++++++++++
 1 file changed, 44 insertions(+)
 create mode 100644 packages/react-moveable/stories/99-Tests/ReactDragAPIApp.tsx

diff --git a/packages/react-moveable/stories/99-Tests/ReactDragAPIApp.tsx b/packages/react-moveable/stories/99-Tests/ReactDragAPIApp.tsx
new file mode 100644
index 000000000..ba85091fd
--- /dev/null
+++ b/packages/react-moveable/stories/99-Tests/ReactDragAPIApp.tsx
@@ -0,0 +1,44 @@
+import React, { useEffect, useRef, useState } from "react";
+import Moveable from "@/react-moveable";
+
+
+export default function App() {
+    const moveableRef = useRef<Moveable>(null);
+    const [target, setTarget] = useState<HTMLElement | null>(null);
+
+    return (
+        <div className="container">
+            <div style={{
+                width: "500px",
+                height: "500px",
+                border: "1px solid black",
+            }} onDragEnter={e => {
+                const nativeEvent = e.nativeEvent;
+
+                if (!target) {
+                    moveableRef.current!.waitToChangeTarget().then(() => {
+                        moveableRef.current!.dragStart(nativeEvent);
+                    });
+                    setTarget(document.querySelector<HTMLElement>("#drag1"));
+                }
+            }}></div>
+            <img
+                id="drag1"
+                src="https://www.w3schools.com/html/img_w3slogo.gif"
+                draggable="true"
+                onDragOver={e => {
+                    e.preventDefault();
+                }}
+            />
+            <Moveable
+                ref={moveableRef}
+                target={target}
+                draggable={true}
+                preventDefault={false}
+                onDrag={e => {
+                    e.target.style.cssText += e.cssText;
+                }}
+            />
+        </div>
+    );
+}