{"id":846,"date":"2023-05-07T20:18:31","date_gmt":"2023-05-07T20:18:31","guid":{"rendered":"http:\/\/codebitshub.com\/?p=846"},"modified":"2023-11-02T08:32:03","modified_gmt":"2023-11-02T08:32:03","slug":"mastering-react-js-drag-and-drop-a-comprehensive-tutorial","status":"publish","type":"post","link":"https:\/\/codebitshub.com\/mastering-react-js-drag-and-drop-a-comprehensive-tutorial\/","title":{"rendered":"Mastering React JS Drag and Drop: A Comprehensive Tutorial"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/codebitshub.com\/mastering-react-js-drag-and-drop-a-comprehensive-tutorial\/#Introduction_to_React_Drag_and_Drop\" >Introduction to React Drag and Drop<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/codebitshub.com\/mastering-react-js-drag-and-drop-a-comprehensive-tutorial\/#Setting_Up_the_React_Environment\" >Setting Up the React Environment<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/codebitshub.com\/mastering-react-js-drag-and-drop-a-comprehensive-tutorial\/#Installing_and_Importing_Libraries\" >Installing and Importing Libraries<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/codebitshub.com\/mastering-react-js-drag-and-drop-a-comprehensive-tutorial\/#Creating_a_Draggable_Component\" >Creating a Draggable Component<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/codebitshub.com\/mastering-react-js-drag-and-drop-a-comprehensive-tutorial\/#Creating_a_Droppable_Component\" >Creating a Droppable Component<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/codebitshub.com\/mastering-react-js-drag-and-drop-a-comprehensive-tutorial\/#Handling_Drag_and_Drop_Events\" >Handling Drag and Drop Events<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/codebitshub.com\/mastering-react-js-drag-and-drop-a-comprehensive-tutorial\/#Summary\" >Summary<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/codebitshub.com\/mastering-react-js-drag-and-drop-a-comprehensive-tutorial\/#Takeaways\" >Takeaways<\/a><\/li><\/ul><\/nav><\/div>\n<h4 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"Introduction_to_React_Drag_and_Drop\"><\/span>Introduction to React Drag and Drop<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p style=\"text-align: justify;\"><a href=\"http:\/\/codebitshub.com\/reactjs-and-npm-a-perfect-combination-for-building-scalable-web-applications\/\" target=\"_blank\" rel=\"noopener\">ReactJS<\/a> Drag and Drop is a popular technique used to create interactive web applications. It allows users to move elements around the screen using a mouse or touch interface. The drag-and-drop functionality can be useful for tasks such as rearranging items in a to-do list or organizing files in a document management system.<\/p>\n<p style=\"text-align: justify;\">To implement drag-and-drop functionality in React, we need to set up our React environment and install the necessary libraries. This article will guide you through the steps to set up the environment, install libraries, and create draggable and droppable components.<\/p>\n<h4 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"Setting_Up_the_React_Environment\"><\/span>Setting Up the React Environment<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p style=\"text-align: justify;\">Before we start building our drag-and-drop functionality, we need to set up our React environment. Here are the steps you need to follow:<\/p>\n<ol>\n<li>Install Node.js from the official <a href=\"https:\/\/nodejs.org\/en\/download\/\" target=\"_blank\" rel=\"noopener\">website<\/a><\/li>\n<li>Open your terminal or command prompt and navigate to the directory where you want to create your <a href=\"https:\/\/react.dev\/\" target=\"_blank\" rel=\"noopener\">React<\/a> project.<\/li>\n<li>Run the following command to create a new React project:<\/li>\n<\/ol>\n<pre><code class=\"language-javascript\" data-line=\"\">npx create-vite-app my-app --template react-ts<\/code><\/pre>\n<h4 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"Installing_and_Importing_Libraries\"><\/span>Installing and Importing Libraries<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p style=\"text-align: justify;\">In order to implement drag-and-drop functionality in React, we need to install the following libraries: <a href=\"https:\/\/react-dnd.github.io\/react-dnd\/docs\/overview\" target=\"_blank\" rel=\"noopener\">react-dnd<\/a>,\u00a0 <a href=\"https:\/\/www.npmjs.com\/package\/react-dnd-html5-backend\" target=\"_blank\" rel=\"noopener\">react-dnd-html5-backend<\/a>, and <a href=\"https:\/\/styled-components.com\/\" target=\"_blank\" rel=\"noopener\">styled-components,<\/a> <a href=\"https:\/\/www.npmjs.com\/package\/typescript\">typescript,<\/a><span style=\"color: #333333;\">\u00a0<\/span><a href=\"https:\/\/www.npmjs.com\/package\/@types\/styled-components\"><span style=\"color: #333333;\">@types\/styled-components<\/span><\/a><\/p>\n<p style=\"text-align: justify;\">These libraries provide the necessary components and APIs to enable drag and drop.<\/p>\n<ol style=\"text-align: justify;\">\n<li>Open your terminal or command prompt and navigate to your project directory.<\/li>\n<li><span style=\"letter-spacing: 0.1px;\">Run the following command to install the required libraries:<\/span><\/li>\n<\/ol>\n<pre><code class=\"language-javascript\" data-line=\"\">npm install --save react-dnd react-dnd-html5-backend @types\/react-dnd @types\/react-dnd-html5-backend<\/code><\/pre>\n<div style=\"text-align: justify;\">\n<ol start=\"3\">\n<li>Once the installation is complete, we need to import the necessary components in our code. Open the file where you want to implement drag and drop (e.g <strong>App.tsx<\/strong>) and add the following imports:<\/li>\n<\/ol>\n<\/div>\n<pre><code class=\"language-javascript\" data-line=\"\">import { DndProvider } from &#039;react-dnd&#039;; \nimport { HTML5Backend } from &#039;react-dnd-html5-backend&#039;;<\/code><\/pre>\n<h4 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"Creating_a_Draggable_Component\"><\/span>Creating a Draggable Component<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p style=\"text-align: justify;\">Now that we have our environment set up and the necessary libraries installed and imported, we can start building our drag-and-drop functionality.<\/p>\n<p style=\"text-align: justify;\">Let&#8217;s create a simple draggable component that can be moved around the screen. Here&#8217;s the code:<\/p>\n<div style=\"text-align: justify;\">\n<pre><code class=\"language-javascript\" data-line=\"\">import { useDrag } from &quot;react-dnd&quot;;\nimport { StyledDraggable } from &quot;.\/Styled&quot;;\nimport { ItemI } from &quot;..\/types&quot;;\n\nconst Draggable: React.FC&lt;ItemI&gt; = ({ label }) =&gt; {\n  const [{ isDragging }, drag] = useDrag(() =&gt; ({\n    type: &quot;box&quot;,\n    item: { type: &quot;box&quot;, label },\n    collect: (monitor) =&gt; ({\n      isDragging: !!monitor.isDragging()\n    })\n  }));\n\n  return (\n    &lt;StyledDraggable ref={drag} style={{ opacity: isDragging ? 0.5 : 1 }}&gt;\n      {label}\n    &lt;\/StyledDraggable&gt;\n  );\n};\n\nexport default Draggable;<\/code><\/pre>\n<\/div>\n<p style=\"text-align: justify;\">Let&#8217;s break down this code:<\/p>\n<ol style=\"text-align: justify;\">\n<li>We define an interface for our props, which in this case only has a label property.<\/li>\n<li>We use the<strong> styled-components<\/strong> library to define our draggable component. This component has a gray border, some padding, and a cursor style that indicates it can be moved.<\/li>\n<li>We define our draggable component using the <strong>useDrag<\/strong> hook, which is provided by the <strong>react-dnd<\/strong> library. This hook returns an array with two values: an object with information about the drag operation, and a ref that we need to attach to the element we want to make draggable.<\/li>\n<li>Inside the <strong>useDrag<\/strong> hook, we define the type of item being dragged (in this case, a &#8216;box&#8217;), and a collect function that returns information about the drag operation, such as whether it&#8217;s currently in progress or not.<\/li>\n<li>We pass the drag ref to our <strong>StyledDraggable<\/strong> component, which makes it draggable.<\/li>\n<\/ol>\n<h4 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"Creating_a_Droppable_Component\"><\/span>Creating a Droppable Component<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p style=\"text-align: justify;\">Now that we have a draggable component, we need to create a droppable component where we can drop it. Let&#8217;s create a simple droppable component that changes color when a draggable item is dropped on it. Here&#8217;s the code:<\/p>\n<pre><code class=\"language-javascript\" data-line=\"\">import { useDrop } from &quot;react-dnd&quot;;\nimport { StyledDroppable } from &quot;.\/Styled&quot;;\nimport { DroppableI } from &quot;.\/types&quot;;\n\nconst Droppable: React.FC&lt;DroppableI&gt; = ({ onDrop, droppedBox }) =&gt; {\n  const [{ isOver }, drop] = useDrop(() =&gt; ({\n    accept: &quot;box&quot;,\n    drop: (item, monitor) =&gt; {\n      onDrop(item);\n    },\n    collect: (monitor) =&gt; {\n      return {\n        isOver: !!monitor.isOver()\n      };\n    }\n  }));\n\n  return (\n    &lt;StyledDroppable ref={drop} isOver={isOver}&gt;\n      {droppedBox}\n    &lt;\/StyledDroppable&gt;\n  );\n};\n\nexport default Droppable;\n<\/code><\/pre>\n<p style=\"text-align: justify;\">Let&#8217;s break down this code:<\/p>\n<ol style=\"text-align: justify;\">\n<li style=\"text-align: justify;\">We use <strong>styled-components<\/strong> to define our droppable component. This component has a gray dashed border, some padding, and a border radius to make it look like a drop zone.<\/li>\n<li style=\"text-align: justify;\">We define our droppable component using the <strong>useDrop<\/strong> hook, which is also provided by the <strong>react-dnd<\/strong> library. This hook returns an array with two values: an object with information about the drop operation, and a ref that we need to attach to the element we want to make droppable.<\/li>\n<li style=\"text-align: justify;\">Inside the <strong>useDrop<\/strong> hook, we define the type of item that can be dropped on this component (in this case, a &#8216;box&#8217;) and a collect function that returns information about the drop operation, such as whether there is currently a draggable item hovering over it or not.<\/li>\n<li style=\"text-align: justify;\">We pass the drop <strong>ref<\/strong> to our <strong>StyledDroppable<\/strong> component, which makes it droppable.<\/li>\n<\/ol>\n<h4 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"Handling_Drag_and_Drop_Events\"><\/span>Handling Drag and Drop Events<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p style=\"text-align: justify;\">Now that we have both a draggable and a droppable component, we need to handle the events that occur when a draggable item is dropped on the droppable component. Let&#8217;s add some event-handling code to our <strong>App<\/strong> component:<\/p>\n<pre><code class=\"language-javascript\" data-line=\"\">import { useState } from &quot;react&quot;;\nimport { DndProvider } from &quot;react-dnd&quot;;\nimport { HTML5Backend } from &quot;react-dnd-html5-backend&quot;;\n\nimport Draggable from &quot;.\/components\/Draggable&quot;;\nimport Droppable from &quot;.\/components\/Droppable&quot;;\nimport { GridContainer, Item, FourthItem } from &quot;.\/Styled&quot;;\nimport { BoxT, ItemI } from &quot;.\/types&quot;;\n\nconst App: React.FC = () =&gt; {\n  const [droppedBox, setDroppedBox] = useState&lt;BoxT&gt;(\n    &quot;Waiting to drop something...&quot;\n  );\n\n  const handleDrop = (item: ItemI) =&gt; {\n    setDroppedBox(item.label);\n  };\n\n  return (\n    &lt;DndProvider backend={HTML5Backend}&gt;\n      &lt;GridContainer&gt;\n        &lt;Item&gt;\n          &lt;Draggable label=&quot;Box 1&quot; \/&gt;\n        &lt;\/Item&gt;\n        &lt;Item&gt;\n          &lt;Draggable label=&quot;Box 2&quot; \/&gt;\n        &lt;\/Item&gt;\n        &lt;Item&gt;\n          &lt;Droppable onDrop={handleDrop} droppedBox={droppedBox} \/&gt;\n        &lt;\/Item&gt;\n        &lt;FourthItem&gt;\n          &lt;div&gt;Drop here!&lt;\/div&gt;\n        &lt;\/FourthItem&gt;\n      &lt;\/GridContainer&gt;\n    &lt;\/DndProvider&gt;\n  );\n};\n\nexport default App;\n<\/code><\/pre>\n<p style=\"text-align: justify;\">Let&#8217;s break down this code:<\/p>\n<ol style=\"text-align: justify;\">\n<li>We import <strong>useState<\/strong> from the react package to keep track of the dropped box.<\/li>\n<li>We import the <strong>DndProvider<\/strong> component from the <strong>react-dnd<\/strong> library and the <strong>HTML5Backend<\/strong> backend.<\/li>\n<li>We import the <strong>Draggable<\/strong> and <strong>Droppable<\/strong> components that we created earlier.<\/li>\n<li>We define a GridContainer component using <strong>styled-components<\/strong> that displays our draggable and droppable components side by side.<\/li>\n<li>We define the <strong>App<\/strong> component, which uses <strong>useState<\/strong> to keep track of the dropped box.<\/li>\n<li>We define a <strong>handleDrop<\/strong> function that sets the <strong>droppedBox<\/strong> state to the label of the dropped item. We also pass the <strong>droppedBox<\/strong> value to the <strong>Dropabble<\/strong> component in order to be rendered if it has value<\/li>\n<li>We wrap our <strong>GridContainer<\/strong> component inside the <strong>DndProvider<\/strong> component, passing in the HTML5Backend backend.<\/li>\n<li>We render our draggable components, passing in a label prop to each.<\/li>\n<\/ol>\n<h4 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"Summary\"><\/span>Summary<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p style=\"text-align: justify;\">In this tutorial, we learned how to use react-dnd to implement drag-and-drop functionality in a React application. We started by installing the necessary packages and setting up a basic project structure. Then we created a draggable component using the useDrag hook and a droppable component using the useDrop hook. Finally, we handled drag-and-drop events using the onDrop prop.<\/p>\n<p style=\"text-align: justify;\"><a href=\"http:\/\/codebitshub.com\/reactjs-and-npm-a-perfect-combination-for-building-scalable-web-applications\/\" target=\"_blank\" rel=\"noopener\">ReactJS<\/a> Drag and Drop is a powerful user interface pattern that can greatly enhance the user experience of your application. By using <strong>react-dnd<\/strong>, we can easily add drag-and-drop functionality to our React components and create more intuitive and interactive user interfaces.<\/p>\n<h4 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"Takeaways\"><\/span>Takeaways<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<ul style=\"text-align: justify;\">\n<li>The <strong>react-dnd<\/strong> library provides a simple and powerful way to add drag-and-drop functionality to your React components.<\/li>\n<li>The <strong>useDrag<\/strong> and <strong>useDrop<\/strong> hooks are used to make components draggable and droppable, respectively.<\/li>\n<li>The <strong>onDrop<\/strong> prop can be used to handle drag-and-drop events.<\/li>\n<li><a href=\"http:\/\/codebitshub.com\/reactjs-and-npm-a-perfect-combination-for-building-scalable-web-applications\/\" target=\"_blank\" rel=\"noopener\">ReactJS<\/a> Drag and Drop can greatly enhance the user experience of your application.<\/li>\n<\/ul>\n<p style=\"text-align: justify;\">You can find a live demo of this example in the following <a href=\"https:\/\/codesandbox.io\/p\/github\/myapos\/react-js-drag-and-drop\" target=\"_blank\" rel=\"noopener\">link.<\/a> Also, the source code is available in <a href=\"https:\/\/github.com\/myapos\/react-js-drag-and-drop\" target=\"_blank\" rel=\"noopener\">this<\/a> GitHub repository.<\/p>\n<p style=\"text-align: justify;\"><strong>Happy coding!<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Introduction to React Drag and Drop ReactJS Drag and Drop is a popular technique used to create interactive web applications. It allows users to move elements around the screen using a mouse or touch interface. The drag-and-drop functionality can be useful for tasks such as rearranging items in a to-do list or organizing files in [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":24,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"nf_dc_page":"","_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[15,12,23],"tags":[17,14],"post_folder":[],"class_list":["post-846","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-frameworks","category-libraries","category-react","tag-javascript","tag-react","post-list-post__featured"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Reactjs drag and drop React codebitshub.com<\/title>\n<meta name=\"description\" content=\"Reactjs drag and drop Mastering React JS Drag and Drop: A Comprehensive Tutorial React codebitshub.com\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/codebitshub.com\/mastering-react-js-drag-and-drop-a-comprehensive-tutorial\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Reactjs drag and drop React codebitshub.com\" \/>\n<meta property=\"og:description\" content=\"Reactjs drag and drop Mastering React JS Drag and Drop: A Comprehensive Tutorial React codebitshub.com\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codebitshub.com\/mastering-react-js-drag-and-drop-a-comprehensive-tutorial\/\" \/>\n<meta property=\"og:site_name\" content=\"codebitshub.com\" \/>\n<meta property=\"article:published_time\" content=\"2023-05-07T20:18:31+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-11-02T08:32:03+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codebitshub.com\/wp-content\/uploads\/2022\/01\/book-g6669afebe_1920.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1125\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"myapos\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"myapos\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/codebitshub.com\\\/mastering-react-js-drag-and-drop-a-comprehensive-tutorial\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/codebitshub.com\\\/mastering-react-js-drag-and-drop-a-comprehensive-tutorial\\\/\"},\"author\":{\"name\":\"myapos\",\"@id\":\"https:\\\/\\\/codebitshub.com\\\/#\\\/schema\\\/person\\\/8f2b53c479aa7e7bb9a24a50b9b51e61\"},\"headline\":\"Mastering React JS Drag and Drop: A Comprehensive Tutorial\",\"datePublished\":\"2023-05-07T20:18:31+00:00\",\"dateModified\":\"2023-11-02T08:32:03+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/codebitshub.com\\\/mastering-react-js-drag-and-drop-a-comprehensive-tutorial\\\/\"},\"wordCount\":1005,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/codebitshub.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/codebitshub.com\\\/mastering-react-js-drag-and-drop-a-comprehensive-tutorial\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/codebitshub.com\\\/wp-content\\\/uploads\\\/2022\\\/01\\\/book-g6669afebe_1920.jpg\",\"keywords\":[\"javascript\",\"React\"],\"articleSection\":[\"Frameworks\",\"Libraries\",\"React\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/codebitshub.com\\\/mastering-react-js-drag-and-drop-a-comprehensive-tutorial\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/codebitshub.com\\\/mastering-react-js-drag-and-drop-a-comprehensive-tutorial\\\/\",\"url\":\"https:\\\/\\\/codebitshub.com\\\/mastering-react-js-drag-and-drop-a-comprehensive-tutorial\\\/\",\"name\":\"Reactjs drag and drop React codebitshub.com\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/codebitshub.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/codebitshub.com\\\/mastering-react-js-drag-and-drop-a-comprehensive-tutorial\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/codebitshub.com\\\/mastering-react-js-drag-and-drop-a-comprehensive-tutorial\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/codebitshub.com\\\/wp-content\\\/uploads\\\/2022\\\/01\\\/book-g6669afebe_1920.jpg\",\"datePublished\":\"2023-05-07T20:18:31+00:00\",\"dateModified\":\"2023-11-02T08:32:03+00:00\",\"description\":\"Reactjs drag and drop Mastering React JS Drag and Drop: A Comprehensive Tutorial React codebitshub.com\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/codebitshub.com\\\/mastering-react-js-drag-and-drop-a-comprehensive-tutorial\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/codebitshub.com\\\/mastering-react-js-drag-and-drop-a-comprehensive-tutorial\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/codebitshub.com\\\/mastering-react-js-drag-and-drop-a-comprehensive-tutorial\\\/#primaryimage\",\"url\":\"https:\\\/\\\/codebitshub.com\\\/wp-content\\\/uploads\\\/2022\\\/01\\\/book-g6669afebe_1920.jpg\",\"contentUrl\":\"https:\\\/\\\/codebitshub.com\\\/wp-content\\\/uploads\\\/2022\\\/01\\\/book-g6669afebe_1920.jpg\",\"width\":1920,\"height\":1125,\"caption\":\"codebitshub.com\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/codebitshub.com\\\/mastering-react-js-drag-and-drop-a-comprehensive-tutorial\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/codebitshub.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Mastering React JS Drag and Drop: A Comprehensive Tutorial\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/codebitshub.com\\\/#website\",\"url\":\"https:\\\/\\\/codebitshub.com\\\/\",\"name\":\"codebitshub.com\",\"description\":\"A blog about programming and coding\",\"publisher\":{\"@id\":\"https:\\\/\\\/codebitshub.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/codebitshub.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/codebitshub.com\\\/#organization\",\"name\":\"codebitshub.com\",\"url\":\"https:\\\/\\\/codebitshub.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/codebitshub.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"http:\\\/\\\/codebitshub.com\\\/wp-content\\\/uploads\\\/2022\\\/01\\\/book-g6669afebe_1920.jpg\",\"contentUrl\":\"http:\\\/\\\/codebitshub.com\\\/wp-content\\\/uploads\\\/2022\\\/01\\\/book-g6669afebe_1920.jpg\",\"width\":1920,\"height\":1125,\"caption\":\"codebitshub.com\"},\"image\":{\"@id\":\"https:\\\/\\\/codebitshub.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/codebitshub.com\\\/#\\\/schema\\\/person\\\/8f2b53c479aa7e7bb9a24a50b9b51e61\",\"name\":\"myapos\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/a35e4d21e2fa562dfe47fe5e67f5163509d4d01a363f2f4297aadf65b5bfc8ab?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/a35e4d21e2fa562dfe47fe5e67f5163509d4d01a363f2f4297aadf65b5bfc8ab?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/a35e4d21e2fa562dfe47fe5e67f5163509d4d01a363f2f4297aadf65b5bfc8ab?s=96&d=mm&r=g\",\"caption\":\"myapos\"},\"url\":\"https:\\\/\\\/codebitshub.com\\\/author\\\/myapos\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Reactjs drag and drop React codebitshub.com","description":"Reactjs drag and drop Mastering React JS Drag and Drop: A Comprehensive Tutorial React codebitshub.com","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/codebitshub.com\/mastering-react-js-drag-and-drop-a-comprehensive-tutorial\/","og_locale":"en_US","og_type":"article","og_title":"Reactjs drag and drop React codebitshub.com","og_description":"Reactjs drag and drop Mastering React JS Drag and Drop: A Comprehensive Tutorial React codebitshub.com","og_url":"https:\/\/codebitshub.com\/mastering-react-js-drag-and-drop-a-comprehensive-tutorial\/","og_site_name":"codebitshub.com","article_published_time":"2023-05-07T20:18:31+00:00","article_modified_time":"2023-11-02T08:32:03+00:00","og_image":[{"width":1920,"height":1125,"url":"https:\/\/codebitshub.com\/wp-content\/uploads\/2022\/01\/book-g6669afebe_1920.jpg","type":"image\/jpeg"}],"author":"myapos","twitter_card":"summary_large_image","twitter_misc":{"Written by":"myapos","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/codebitshub.com\/mastering-react-js-drag-and-drop-a-comprehensive-tutorial\/#article","isPartOf":{"@id":"https:\/\/codebitshub.com\/mastering-react-js-drag-and-drop-a-comprehensive-tutorial\/"},"author":{"name":"myapos","@id":"https:\/\/codebitshub.com\/#\/schema\/person\/8f2b53c479aa7e7bb9a24a50b9b51e61"},"headline":"Mastering React JS Drag and Drop: A Comprehensive Tutorial","datePublished":"2023-05-07T20:18:31+00:00","dateModified":"2023-11-02T08:32:03+00:00","mainEntityOfPage":{"@id":"https:\/\/codebitshub.com\/mastering-react-js-drag-and-drop-a-comprehensive-tutorial\/"},"wordCount":1005,"commentCount":0,"publisher":{"@id":"https:\/\/codebitshub.com\/#organization"},"image":{"@id":"https:\/\/codebitshub.com\/mastering-react-js-drag-and-drop-a-comprehensive-tutorial\/#primaryimage"},"thumbnailUrl":"https:\/\/codebitshub.com\/wp-content\/uploads\/2022\/01\/book-g6669afebe_1920.jpg","keywords":["javascript","React"],"articleSection":["Frameworks","Libraries","React"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/codebitshub.com\/mastering-react-js-drag-and-drop-a-comprehensive-tutorial\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/codebitshub.com\/mastering-react-js-drag-and-drop-a-comprehensive-tutorial\/","url":"https:\/\/codebitshub.com\/mastering-react-js-drag-and-drop-a-comprehensive-tutorial\/","name":"Reactjs drag and drop React codebitshub.com","isPartOf":{"@id":"https:\/\/codebitshub.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codebitshub.com\/mastering-react-js-drag-and-drop-a-comprehensive-tutorial\/#primaryimage"},"image":{"@id":"https:\/\/codebitshub.com\/mastering-react-js-drag-and-drop-a-comprehensive-tutorial\/#primaryimage"},"thumbnailUrl":"https:\/\/codebitshub.com\/wp-content\/uploads\/2022\/01\/book-g6669afebe_1920.jpg","datePublished":"2023-05-07T20:18:31+00:00","dateModified":"2023-11-02T08:32:03+00:00","description":"Reactjs drag and drop Mastering React JS Drag and Drop: A Comprehensive Tutorial React codebitshub.com","breadcrumb":{"@id":"https:\/\/codebitshub.com\/mastering-react-js-drag-and-drop-a-comprehensive-tutorial\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codebitshub.com\/mastering-react-js-drag-and-drop-a-comprehensive-tutorial\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codebitshub.com\/mastering-react-js-drag-and-drop-a-comprehensive-tutorial\/#primaryimage","url":"https:\/\/codebitshub.com\/wp-content\/uploads\/2022\/01\/book-g6669afebe_1920.jpg","contentUrl":"https:\/\/codebitshub.com\/wp-content\/uploads\/2022\/01\/book-g6669afebe_1920.jpg","width":1920,"height":1125,"caption":"codebitshub.com"},{"@type":"BreadcrumbList","@id":"https:\/\/codebitshub.com\/mastering-react-js-drag-and-drop-a-comprehensive-tutorial\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/codebitshub.com\/"},{"@type":"ListItem","position":2,"name":"Mastering React JS Drag and Drop: A Comprehensive Tutorial"}]},{"@type":"WebSite","@id":"https:\/\/codebitshub.com\/#website","url":"https:\/\/codebitshub.com\/","name":"codebitshub.com","description":"A blog about programming and coding","publisher":{"@id":"https:\/\/codebitshub.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codebitshub.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/codebitshub.com\/#organization","name":"codebitshub.com","url":"https:\/\/codebitshub.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codebitshub.com\/#\/schema\/logo\/image\/","url":"http:\/\/codebitshub.com\/wp-content\/uploads\/2022\/01\/book-g6669afebe_1920.jpg","contentUrl":"http:\/\/codebitshub.com\/wp-content\/uploads\/2022\/01\/book-g6669afebe_1920.jpg","width":1920,"height":1125,"caption":"codebitshub.com"},"image":{"@id":"https:\/\/codebitshub.com\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/codebitshub.com\/#\/schema\/person\/8f2b53c479aa7e7bb9a24a50b9b51e61","name":"myapos","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/a35e4d21e2fa562dfe47fe5e67f5163509d4d01a363f2f4297aadf65b5bfc8ab?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/a35e4d21e2fa562dfe47fe5e67f5163509d4d01a363f2f4297aadf65b5bfc8ab?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/a35e4d21e2fa562dfe47fe5e67f5163509d4d01a363f2f4297aadf65b5bfc8ab?s=96&d=mm&r=g","caption":"myapos"},"url":"https:\/\/codebitshub.com\/author\/myapos\/"}]}},"_links":{"self":[{"href":"https:\/\/codebitshub.com\/wp-json\/wp\/v2\/posts\/846","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codebitshub.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codebitshub.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codebitshub.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codebitshub.com\/wp-json\/wp\/v2\/comments?post=846"}],"version-history":[{"count":6,"href":"https:\/\/codebitshub.com\/wp-json\/wp\/v2\/posts\/846\/revisions"}],"predecessor-version":[{"id":887,"href":"https:\/\/codebitshub.com\/wp-json\/wp\/v2\/posts\/846\/revisions\/887"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codebitshub.com\/wp-json\/wp\/v2\/media\/24"}],"wp:attachment":[{"href":"https:\/\/codebitshub.com\/wp-json\/wp\/v2\/media?parent=846"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codebitshub.com\/wp-json\/wp\/v2\/categories?post=846"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codebitshub.com\/wp-json\/wp\/v2\/tags?post=846"},{"taxonomy":"post_folder","embeddable":true,"href":"https:\/\/codebitshub.com\/wp-json\/wp\/v2\/post_folder?post=846"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}