{"id":4663,"date":"2021-07-23T04:20:59","date_gmt":"2021-07-23T04:20:59","guid":{"rendered":"https:\/\/studysection.com\/blog\/?p=4663"},"modified":"2021-07-23T05:17:30","modified_gmt":"2021-07-23T05:17:30","slug":"make-react-elements-draggable","status":"publish","type":"post","link":"https:\/\/studysection.com\/blog\/make-react-elements-draggable\/","title":{"rendered":"Make React Elements Draggable"},"content":{"rendered":"

React is an open-source, front-end javascript<\/a> library to build web applications, It is used to build single-page applications. It allows developers to create reusable components. It is led by Facebook and individuals in the community.<\/p>\n

User experience and interactivity are becoming more important in modern apps. Many applications like Wix, Jira are using the drag and drop feature in their app. So, it is sometimes good to add drag and drop elements in your app. We are going to create a react application in which a user can drag a box around the screen.<\/p>\n

Step 1: Install npm package<\/strong>
\nAfter creating your app with create-react-app draggable-demo <\/em>, run the below command in your project:
\nnpm install react-draggable<\/code><\/p>\n

Step 2: Create a style object <\/strong>
\nCreate a style object on the top of the file App.js above App component and below imports. This will shape the element that we are going to make draggable.
\nconst styles = {
\n draggableContainer:{
\n backgroundColor: '#eb596e',
\n padding:'65px 35px',
\n borderRadius:'100px'
\n }
\n}<\/code><\/p>\n

Step 3: Add a draggable component in your App.js.<\/strong>
\nIn App.js, you need to import the Draggable component from the package you have installed using the above command.
\nimport Draggable from 'react-draggable';<\/code><\/p>\n

Now wrap the element with Draggable that you want to drag as shown below, note that the \u201chandle\u201d prop value should be the className of the element you want to make draggable.
\n<Draggable
\n handle=\".handle\">
\n <div>
\n <div style={styles.draggableContainer} className=\"handle\">Drag me<\/div>
\n <\/div>
\n <\/Draggable><\/code><\/p>\n

The <Draggable> <\/em> element wraps an element and extends it with new event handlers and styles. It does not create a wrapper element inside the Document Object Model(DOM). You can use new event handlers according to your requirements. <\/p>\n

Here is the complete code of App.js
\nimport '.\/App.css';
\nimport Draggable from 'react-draggable';
\nconst styles = {
\n draggableContainer:{
\n backgroundColor: '#eb596e',
\n padding:'65px 35px',
\n borderRadius:'100px'
\n }
\n}
\nfunction App() {
\n return (
\n <div className=\"App\">
\n <header className=\"App-header\">
\n <Draggable
\n handle=\".handle\">
\n <div>
\n <div style={styles.draggableContainer} className=\"handle\">Drag me<\/div>
\n <\/div>
\n <\/Draggable>
\n <\/header>
\n <\/div>
\n );
\n}
\nexport default App;<\/code><\/p>\n

Step 4: Now run the below command to start your app:<\/strong>
\nnpm start<\/code><\/p>\n

\"Draggable\"\/<\/p>\n

For more information about the Draggable component, you can check this github repository<\/a>.<\/p>\n

Get certification for your knowledge in the fundamentals of Computer functioning by clearing the Computer Certification Exam<\/a> conducted by StudySection. After going through this Computer Certification exam, you will be able to evaluate your basic knowledge of computers. <\/small><\/p>\n","protected":false},"excerpt":{"rendered":"

React is an open-source, front-end javascript library to build web applications, It is used to build single-page applications. It allows<\/p>\n","protected":false},"author":1,"featured_media":4667,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[175,347],"acf":[],"yoast_head":"\nMake React elements draggable - StudySection Blog<\/title>\n<meta name=\"description\" content=\"Create a style object on top of the file App.js above App component and below imports. It will shape the element that needs to be draggable.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/studysection.com\/blog\/make-react-elements-draggable\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Make React elements draggable - StudySection Blog\" \/>\n<meta property=\"og:description\" content=\"Create a style object on top of the file App.js above App component and below imports. It will shape the element that needs to be draggable.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/studysection.com\/blog\/make-react-elements-draggable\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog Posts on famous people, innovations and educational topics\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/studysection\" \/>\n<meta property=\"article:published_time\" content=\"2021-07-23T04:20:59+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-07-23T05:17:30+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/07\/draggable.png\" \/>\n\t<meta property=\"og:image:width\" content=\"300\" \/>\n\t<meta property=\"og:image:height\" content=\"200\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"admin-studysection-blog\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@studysection\" \/>\n<meta name=\"twitter:site\" content=\"@studysection\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin-studysection-blog\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/studysection.com\/blog\/make-react-elements-draggable\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/studysection.com\/blog\/make-react-elements-draggable\/\"},\"author\":{\"name\":\"admin-studysection-blog\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402\"},\"headline\":\"Make React Elements Draggable\",\"datePublished\":\"2021-07-23T04:20:59+00:00\",\"dateModified\":\"2021-07-23T05:17:30+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/studysection.com\/blog\/make-react-elements-draggable\/\"},\"wordCount\":320,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/studysection.com\/blog\/#organization\"},\"keywords\":[\"draggable\",\"React\"],\"articleSection\":[\"Learn and Grow\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/studysection.com\/blog\/make-react-elements-draggable\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/studysection.com\/blog\/make-react-elements-draggable\/\",\"url\":\"https:\/\/studysection.com\/blog\/make-react-elements-draggable\/\",\"name\":\"Make React elements draggable - StudySection Blog\",\"isPartOf\":{\"@id\":\"https:\/\/studysection.com\/blog\/#website\"},\"datePublished\":\"2021-07-23T04:20:59+00:00\",\"dateModified\":\"2021-07-23T05:17:30+00:00\",\"description\":\"Create a style object on top of the file App.js above App component and below imports. It will shape the element that needs to be draggable.\",\"breadcrumb\":{\"@id\":\"https:\/\/studysection.com\/blog\/make-react-elements-draggable\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/studysection.com\/blog\/make-react-elements-draggable\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/studysection.com\/blog\/make-react-elements-draggable\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/studysection.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Make React Elements Draggable\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/studysection.com\/blog\/#website\",\"url\":\"https:\/\/studysection.com\/blog\/\",\"name\":\"Blog Posts on famous people, innovations and educational topics\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/studysection.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/studysection.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/studysection.com\/blog\/#organization\",\"name\":\"StudySection\",\"url\":\"https:\/\/studysection.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png\",\"contentUrl\":\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png\",\"width\":920,\"height\":440,\"caption\":\"StudySection\"},\"image\":{\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/studysection\",\"https:\/\/twitter.com\/studysection\",\"https:\/\/www.instagram.com\/study.section\/\",\"https:\/\/www.linkedin.com\/company\/studysection\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402\",\"name\":\"admin-studysection-blog\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g\",\"caption\":\"admin-studysection-blog\"},\"url\":\"https:\/\/studysection.com\/blog\/author\/admin-studysection-blog\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Make React elements draggable - StudySection Blog","description":"Create a style object on top of the file App.js above App component and below imports. It will shape the element that needs to be draggable.","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:\/\/studysection.com\/blog\/make-react-elements-draggable\/","og_locale":"en_US","og_type":"article","og_title":"Make React elements draggable - StudySection Blog","og_description":"Create a style object on top of the file App.js above App component and below imports. It will shape the element that needs to be draggable.","og_url":"https:\/\/studysection.com\/blog\/make-react-elements-draggable\/","og_site_name":"Blog Posts on famous people, innovations and educational topics","article_publisher":"https:\/\/www.facebook.com\/studysection","article_published_time":"2021-07-23T04:20:59+00:00","article_modified_time":"2021-07-23T05:17:30+00:00","og_image":[{"width":300,"height":200,"url":"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/07\/draggable.png","type":"image\/png"}],"author":"admin-studysection-blog","twitter_card":"summary_large_image","twitter_creator":"@studysection","twitter_site":"@studysection","twitter_misc":{"Written by":"admin-studysection-blog","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/studysection.com\/blog\/make-react-elements-draggable\/#article","isPartOf":{"@id":"https:\/\/studysection.com\/blog\/make-react-elements-draggable\/"},"author":{"name":"admin-studysection-blog","@id":"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402"},"headline":"Make React Elements Draggable","datePublished":"2021-07-23T04:20:59+00:00","dateModified":"2021-07-23T05:17:30+00:00","mainEntityOfPage":{"@id":"https:\/\/studysection.com\/blog\/make-react-elements-draggable\/"},"wordCount":320,"commentCount":0,"publisher":{"@id":"https:\/\/studysection.com\/blog\/#organization"},"keywords":["draggable","React"],"articleSection":["Learn and Grow"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/studysection.com\/blog\/make-react-elements-draggable\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/studysection.com\/blog\/make-react-elements-draggable\/","url":"https:\/\/studysection.com\/blog\/make-react-elements-draggable\/","name":"Make React elements draggable - StudySection Blog","isPartOf":{"@id":"https:\/\/studysection.com\/blog\/#website"},"datePublished":"2021-07-23T04:20:59+00:00","dateModified":"2021-07-23T05:17:30+00:00","description":"Create a style object on top of the file App.js above App component and below imports. It will shape the element that needs to be draggable.","breadcrumb":{"@id":"https:\/\/studysection.com\/blog\/make-react-elements-draggable\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/studysection.com\/blog\/make-react-elements-draggable\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/studysection.com\/blog\/make-react-elements-draggable\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/studysection.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Make React Elements Draggable"}]},{"@type":"WebSite","@id":"https:\/\/studysection.com\/blog\/#website","url":"https:\/\/studysection.com\/blog\/","name":"Blog Posts on famous people, innovations and educational topics","description":"","publisher":{"@id":"https:\/\/studysection.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/studysection.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/studysection.com\/blog\/#organization","name":"StudySection","url":"https:\/\/studysection.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png","contentUrl":"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png","width":920,"height":440,"caption":"StudySection"},"image":{"@id":"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/studysection","https:\/\/twitter.com\/studysection","https:\/\/www.instagram.com\/study.section\/","https:\/\/www.linkedin.com\/company\/studysection"]},{"@type":"Person","@id":"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402","name":"admin-studysection-blog","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/studysection.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g","caption":"admin-studysection-blog"},"url":"https:\/\/studysection.com\/blog\/author\/admin-studysection-blog\/"}]}},"views":813,"_links":{"self":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts\/4663"}],"collection":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/comments?post=4663"}],"version-history":[{"count":5,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts\/4663\/revisions"}],"predecessor-version":[{"id":4671,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts\/4663\/revisions\/4671"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/media\/4667"}],"wp:attachment":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/media?parent=4663"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/categories?post=4663"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/tags?post=4663"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}