Add dragging ability of images

mortenskoett · Dec 18, 2022 · 8c5f11b · 8c5f11b
1 parent 7d6f424
commit 8c5f11b
Show file tree

Hide file tree

Showing 5 changed files with 120 additions and 18 deletions.
diff --git a/package.json b/package.json
@@ -12,6 +12,8 @@
     "@types/react-dom": "^18.0.9",
     "cuid": "^2.1.8",
     "react": "^18.2.0",
+    "react-dnd": "^16.0.1",
+    "react-dnd-html5-backend": "^16.0.1",
     "react-dom": "^18.2.0",
     "react-dropzone": "^14.2.3",
     "react-scripts": "5.0.1",

diff --git a/src/components/Wall.tsx b/src/components/Wall.tsx
@@ -1,4 +1,7 @@
 import React, { CSSProperties } from 'react';
+import { ItemTypes } from "../dnd/types"
+import { ConnectableElement, useDrag, useDrop } from 'react-dnd'
+
 
 export type WallImageData = {
   id: string,
@@ -32,11 +35,50 @@ export const Wall = ({ images }: WallProps) => {
   )
 }
 
+
 // Individual image render
 const Image = ({ id, src }: WallImageData) => {
+
+  // Handle image drag and drop
+  const [{ isDragging }, drag] = useDrag(() => ({
+    type: ItemTypes.IMAGE,
+    collect: monitor => ({
+      isDragging: monitor.isDragging(),
+    }),
+  }))
+
+  const [{ isOver }, drop] = useDrop(() => ({
+    accept: ItemTypes.IMAGE,
+    drop: () => console.log("drop called"),
+    collect: monitor => ({
+      isOver: monitor.isOver()
+    })
+  }),
+  )
+
+  function attachRef(el: ConnectableElement) {
+    drag(el)
+    drop(el)
+  }
+
+  const imageStyle: CSSProperties = {
+    float: "left",
+    display: "inline",
+    width: "33.333%",
+    maxHeight: "auto",
+    padding: "1px",
+    opacity: isDragging ? 0.3 : 1,
+    cursor: 'grabbing',
+  }
+
   return (
-    <div className="file-item" style={imageItemStyle}>
-      <img className="file-img" src={src} alt={`img-${id}`} style={imageStyle} />
+    <div className="file-item" >
+      <img className="file-img"
+        ref={attachRef} // image drag
+        src={src}
+        alt={`img-${id}`}
+        style={imageStyle}
+      />
     </div>
   );
 };
@@ -46,24 +88,13 @@ const wallStyle: CSSProperties = {
   display: 'flex',
   flexWrap: 'wrap',
   paddingTop: "1em",
-  // border: "3px dotted orange",
+  // border: "3px dotted orange", // debugging
 }
 
 const imageListStyle: CSSProperties = {
   width: "70%",
   margin: "1px",
   padding: "1px",
-  // border: "3px dotted red",
-}
-
-const imageItemStyle: CSSProperties = {
-}
-
-const imageStyle: CSSProperties = {
-  float: "left",
-  display: "inline",
-  width: "33.333%",
-  maxHeight: "auto",
-  padding: "1px",
+  // border: "3px dotted red",  // debugging
 }
 
diff --git a/src/dnd/types.ts b/src/dnd/types.ts
@@ -0,0 +1,3 @@
+export const ItemTypes = {
+  IMAGE: 'image',
+}
diff --git a/src/pages/Homepage.tsx b/src/pages/Homepage.tsx
@@ -1,4 +1,6 @@
-import React, { CSSProperties, useCallback } from 'react';
+import React, { useCallback } from 'react';
+import { DndProvider } from 'react-dnd'
+import { HTML5Backend } from 'react-dnd-html5-backend'
 import cuid from "cuid";
 
 import Dropzone from "../components/Dropzone";
@@ -15,6 +17,12 @@ const dummy_images: WallImageData[] = [
   { id: cuid(), src: d2 },
   { id: cuid(), src: d3 },
   { id: cuid(), src: d4 },
+  { id: cuid(), src: d4 },
+  { id: cuid(), src: d4 },
+  { id: cuid(), src: d3 },
+  { id: cuid(), src: d3 },
+  { id: cuid(), src: d4 },
+  { id: cuid(), src: d4 },
 ]
 
 const Homepage = () => {
@@ -29,7 +37,9 @@ const Homepage = () => {
         'image/png': ['.png'],
         'image/jpeg': ['.jpg', '.jpeg']
       }}></Dropzone>
-      <Wall images={dummy_images} />
+      <DndProvider backend={HTML5Backend}>
+        <Wall images={dummy_images} />
+      </DndProvider>
     </main>
   )
 }

diff --git a/yarn.lock b/yarn.lock
@@ -1572,6 +1572,21 @@
     schema-utils "^3.0.0"
     source-map "^0.7.3"
 
+"@react-dnd/asap@^5.0.1":
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/@react-dnd/asap/-/asap-5.0.2.tgz#1f81f124c1cd6f39511c11a881cfb0f715343488"
+  integrity sha512-WLyfoHvxhs0V9U+GTsGilGgf2QsPl6ZZ44fnv0/b8T3nQyvzxidxsg/ZltbWssbsRDlYW8UKSQMTGotuTotZ6A==
+
+"@react-dnd/invariant@^4.0.1":
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/@react-dnd/invariant/-/invariant-4.0.2.tgz#b92edffca10a26466643349fac7cdfb8799769df"
+  integrity sha512-xKCTqAK/FFauOM9Ta2pswIyT3D8AQlfrYdOi/toTPEhqCuAs1v5tcJ3Y08Izh1cJ5Jchwy9SeAXmMg6zrKs2iw==
+
+"@react-dnd/shallowequal@^4.0.1":
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/@react-dnd/shallowequal/-/shallowequal-4.0.2.tgz#d1b4befa423f692fa4abf1c79209702e7d8ae4b4"
+  integrity sha512-/RVXdLvJxLg4QKvMoM5WlwNR9ViO9z8B/qPcc+C0Sa/teJY7QG7kJ441DwzOjMYEY7GmU4dj5EcGHIkKZiQZCA==
+
 "@rollup/plugin-babel@^5.2.0":
   version "5.3.1"
   resolved "https://registry.yarnpkg.com/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz#04bc0608f4aa4b2e4b1aebf284344d0f68fda283"
@@ -3667,6 +3682,15 @@ dlv@^1.1.3:
   resolved "https://registry.yarnpkg.com/dlv/-/dlv-1.1.3.tgz#5c198a8a11453596e751494d49874bc7732f2e79"
   integrity sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==
 
+dnd-core@^16.0.1:
+  version "16.0.1"
+  resolved "https://registry.yarnpkg.com/dnd-core/-/dnd-core-16.0.1.tgz#a1c213ed08961f6bd1959a28bb76f1a868360d19"
+  integrity sha512-HK294sl7tbw6F6IeuK16YSBUoorvHpY8RHO+9yFfaJyCDVb6n7PRcezrOEOa2SBCqiYpemh5Jx20ZcjKdFAVng==
+  dependencies:
+    "@react-dnd/asap" "^5.0.1"
+    "@react-dnd/invariant" "^4.0.1"
+    redux "^4.2.0"
+
 dns-equal@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/dns-equal/-/dns-equal-1.0.0.tgz#b39e7f1da6eb0a75ba9c17324b34753c47e0654d"
@@ -4766,6 +4790,13 @@ he@^1.2.0:
   resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
   integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
 
+hoist-non-react-statics@^3.3.2:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
+  integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
+  dependencies:
+    react-is "^16.7.0"
+
 hoopy@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/hoopy/-/hoopy-0.1.4.tgz#609207d661100033a9a9402ad3dea677381c1b1d"
@@ -7430,6 +7461,24 @@ react-dev-utils@^12.0.1:
     strip-ansi "^6.0.1"
     text-table "^0.2.0"
 
+react-dnd-html5-backend@^16.0.1:
+  version "16.0.1"
+  resolved "https://registry.yarnpkg.com/react-dnd-html5-backend/-/react-dnd-html5-backend-16.0.1.tgz#87faef15845d512a23b3c08d29ecfd34871688b6"
+  integrity sha512-Wu3dw5aDJmOGw8WjH1I1/yTH+vlXEL4vmjk5p+MHxP8HuHJS1lAGeIdG/hze1AvNeXWo/JgULV87LyQOr+r5jw==
+  dependencies:
+    dnd-core "^16.0.1"
+
+react-dnd@^16.0.1:
+  version "16.0.1"
+  resolved "https://registry.yarnpkg.com/react-dnd/-/react-dnd-16.0.1.tgz#2442a3ec67892c60d40a1559eef45498ba26fa37"
+  integrity sha512-QeoM/i73HHu2XF9aKksIUuamHPDvRglEwdHL4jsp784BgUuWcg6mzfxT0QDdQz8Wj0qyRKx2eMg8iZtWvU4E2Q==
+  dependencies:
+    "@react-dnd/invariant" "^4.0.1"
+    "@react-dnd/shallowequal" "^4.0.1"
+    dnd-core "^16.0.1"
+    fast-deep-equal "^3.1.3"
+    hoist-non-react-statics "^3.3.2"
+
 react-dom@^18.2.0:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"
@@ -7452,7 +7501,7 @@ react-error-overlay@^6.0.11:
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.11.tgz#92835de5841c5cf08ba00ddd2d677b6d17ff9adb"
   integrity sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==
 
-react-is@^16.13.1:
+react-is@^16.13.1, react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@@ -7585,6 +7634,13 @@ redent@^3.0.0:
     indent-string "^4.0.0"
     strip-indent "^3.0.0"
 
+redux@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/redux/-/redux-4.2.0.tgz#46f10d6e29b6666df758780437651eeb2b969f13"
+  integrity sha512-oSBmcKKIuIR4ME29/AeNUnl5L+hvBq7OaJWzaptTQJAntaPvxIJqfnjbaEiCzzaIz+XmVILfqAM3Ob0aXLPfjA==
+  dependencies:
+    "@babel/runtime" "^7.9.2"
+
 regenerate-unicode-properties@^10.1.0:
   version "10.1.0"
   resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-10.1.0.tgz#7c3192cab6dd24e21cb4461e5ddd7dd24fa8374c"