Create a draggable div in react.js 📐

One of the challenges that I find myself facing as I learn more about react.js is learning to rely on existing components. Often I catch myself trying to build framework tools and functions from the ground up.

Typically this means I'm falling back to my pure css/bootstrap roots. This is time consuming, frustrating, and unproductive.

If you read my article on the Unsplash api image search app I was working on, I ran in to this exact issue. I wanted a simple feature, drag and drop. Just like on your desktop, the ability to drag and drop a window.

📷 unsplash image search app

One of my favorite tools is Unsplash. With an extensive library of high quality images, it’s been one of the best tool for a freelance builder type such as myself. On releasing their api, many of my favorite tools began using custom image searches in their applications. I loved this

MapticalMaptical

I did get sidetracked trying to develop a pure js/css solution, but thankfully I came across react draggable. A simple component that when used, turns your div into a draggable item.

react-draggable

React draggable component. Latest version: 4.4.5, last published: a year ago. Start using react-draggable in your project by running `npm i react-draggable`. There are 1742 other projects in the npm registry using react-draggable.

npm

This is the very basic code that took my div window and made it a draggable component. As you can see, I had to create a class called "Drag" to style the component, and then using the <Draggable> component to make the component.

  return (
    
    <div className="Drag">
      <Draggable>
        <div>
          <header></header>
         
        </div>
      </Draggable>
    </div>
  );

After using this component, you can see the final draggable result below. In my case, I just used the wizard emoji, however you could style a whole window to be where the user could click and grab.