{"id":28334,"date":"2022-04-28T14:40:08","date_gmt":"2022-04-28T14:40:08","guid":{"rendered":"http:\/\/how-to-rearrange-gallery-images-using-react-dnd"},"modified":"2025-02-15T12:02:36","modified_gmt":"2025-02-15T20:02:36","slug":"how-to-rearrange-gallery-images-using-react-dnd","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-rearrange-gallery-images-using-react-dnd\/","title":{"rendered":"How to Rearrange Gallery Images Using React DnD"},"content":{"rendered":"

React drag and drop (React DnD) is a beautiful and accessible drag and drop library made for React apps that let\u2019s build interactive experiences. It supports touch interactions on mobile devices and HTML5, but it depends on touch support<\/a>. One popular app that uses this drag and drop interaction is Trello.<\/p>\n

In this post, we will learn how to build a page filled with images that allow anyone to move an image around to another position within the app in response to the drag and drop events.<\/p>\n

The complete project is on CodeSandbox<\/a>.<\/p>\n

<\/code><\/span><\/pre>\n<\/div>\n  \n  
\n    <\/iframe>\n  <\/div>\n\n  
\n## Prerequisites\n\nTo complete the exercise in this post, we need the following:\n\n- Basic knowledge of JavaScript and React.\n- Node.js installed on our computer.\n\n\n## Getting Started\n\nReact is a JavaScript frontend library for generating and building user interfaces for web applications.\n\nTo scaffold a new project, run the following command in our terminal:\n\n\n```sh\nnpx create-react-app <project-name>\n<\/code><\/pre>\n
After the installation, navigate to the created directory and run the command below to start the application:<\/p>\n
cd <project-name> # navigate to the directory <\/span>\n\nnpm run start # run the development server<\/span>\n<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n
React.js starts the development environment on http:\/\/localhost:3000<\/code>.<\/p>\n
With the whole setup done, run either of the commands below to install the react-dnd<\/code> ****and ****react-dnd-html5-backend<\/code> libraries to our project:<\/p>\n
yarn add react-dnd react-dnd-html5-backend\n    \n# or <\/span>\n    \nnpm install react-dnd react-dnd-html5-backend\n<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n
react-dnd-html5-backend<\/code>: This library will allow the use of the drag and drop API with react``-``dnd<\/code>.<\/p>\n
Now, let\u2019s implement the drag and drop functionality in the project\u2019s entry point , index.js<\/code> , with the provider component.<\/p>\n
\/\/ src\/index.js<\/span>\n\/\/ other imports<\/span>\n    \n\/\/ add this<\/span>\nimport<\/span> { DndProvider } from<\/span> \"react-dnd\"<\/span>;\nimport<\/span> { HTML5Backend } from<\/span> \"react-dnd-html5-backend\"<\/span>;\nimport<\/span> App from<\/span> \".\/App\"<\/span>;\nimport<\/span> \".\/styles.css\"<\/span>;\n    \nconst<\/span> rootElement = document<\/span>.getElementById(\"root\"<\/span>);\nconst<\/span> root = createRoot(rootElement);\n\nroot.render(\n  <StrictMode<\/span>><\/span>\n    <DndProvider<\/span> backend<\/span>={HTML5Backend}<\/span>><\/span>\n      <App<\/span> \/><\/span>\n    <\/DndProvider<\/span>><\/span>\n  <\/StrictMode<\/span>><\/span><\/span>\n);\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
In the code block above, we wrap the highest order component, App<\/code>, with a provider that comes with the React DnD library. The provider serves to alert the library that the component inside the provider will have access to the library\u2019s functionality.  Also, we pass in the backend<\/code> property, which is the primary backend support for the touch support.<\/p>\n
Project: Gallery Images<\/h2>\n
To have access to the image on the page, we will start with creating a list of images in our app that will have the ability to drag and drop the desired image.<\/p>\n
We won\u2019t be diving deep into building the gallery image app from scratch for this post. However, we will focus our attention more on the functionality of using the React DnD library to rearrange the image.<\/p>\n
Now, create an array of objects that contains the data.<\/p>\n
# src\/data.js<\/span>\nexport default<\/span> [\n  {\n    id: 1<\/span>,\n    title: 'Travel'<\/span>,\n    img:\n      'https:\/\/media.istockphoto.com\/photos\/beautiful-view-of-amazing-sandstone-formations-in-famous-lower-near-picture-id807387518?k=20&m=807387518&s=612x612&w=0&h=G8O867Id71Sk6LCiAnAYp-dIu9uf4YqlfnO3uj-SQ00='<\/span>\n   },\n...\n<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n
As pointed out earlier, we won\u2019t be focusing much on the styling of the app. Create a new file in the src<\/code> folder called styles.css<\/code> and paste the following code from this gist<\/a>.<\/p>\n
Next, let\u2019s loop through the resulting data objects in the App.js<\/code> file to see the gallery images from the Card<\/code> component by passing props. Add the following code:<\/p>\n
\/\/ src\/App.js<\/span>\nimport<\/span> React from<\/span> \"react\"<\/span>;\nimport<\/span> galleryList from<\/span> \".\/data.js\"<\/span>;\n    \nconst<\/span> Card = ({src, title, id, index}<\/span>) =><\/span> {\n  return<\/span> (\n    <div<\/span> className<\/span>=\"card\"<\/span>><\/span>\n      <img<\/span> src<\/span>={src}<\/span> alt<\/span>={title}<\/span> \/><\/span>\n    <\/div<\/span>><\/span><\/span>\n  );\n};\nconst<\/span> App = ()<\/span> =><\/span> {\n  const<\/span> [images, setImages] = React.useState(galleryList);\n      \nreturn<\/span> (\n  <main<\/span>><\/span>\n    {React.Children.toArray(\n      images.map((image, index) => (\n        <Card<\/span>\n          src<\/span>={image.img}<\/span>\n          title<\/span>={image.title}<\/span>\n          id<\/span>={image.id}<\/span>\n          index<\/span>={index}<\/span>\n        \/><\/span>\n      ))\n    )}\n  <\/main<\/span>><\/span><\/span>\n);\n};\nexport<\/span> default<\/span> App;\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
The result from the above should look like this:<\/p>\n
\"\"<\/p>\n
Implementing Drag and Drop on Images with React DnD<\/h2>\n
With the library present in our app, we import the useDrag<\/code> hook from React DnD.<\/p>\n
\/\/ src\/App.js<\/span>\n\/\/ react import<\/span>\nimport<\/span> { useDrag} from<\/span> \"react-dnd\"<\/span>;\n\/\/ image data objects import<\/span>\n    \nconst<\/span> Card = ({src, title, id, index}<\/span>) =><\/span> {\nconst<\/span> ref = React.useRef(null<\/span>); \n  return<\/span> (\n    <div<\/span> className<\/span>=\"card\"<\/span>><\/span>\n        \/\/ card images\n    <\/div<\/span>><\/span><\/span>\n  );\n};\n\nconst<\/span> App = ()<\/span> =><\/span> {\n      \/\/ state <\/span>\nconst<\/span> [{ isDragging }, drag] = useDrag({\n    type<\/span>: \"image\"<\/span>,\n    item<\/span>: ()<\/span> =><\/span> {\n      return<\/span> { id, index };\n    },\n    collect<\/span>: (monitor<\/span>) =><\/span> {\n      return<\/span> {\n        isDragging<\/span>: monitor.isDragging()\n      };\n    }\n});\n    \nreturn<\/span> (\n  <main<\/span>><\/span>\n    \/\/ loop through the images in Card component\n  <\/main<\/span>><\/span><\/span>\n);\n};\nexport<\/span> default<\/span> App;\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
In the above code block, it does the following:<\/p>\n