Create Draggable div in React js without external library

In this tutorial we are going to create draggable <div/> in React application. Also we are not going use any external libraries for this implementation which will help you to customise this code as per your requirement.

End result will look like below :

Basic idea is we are going to create a wrapper with styled components, and will add actions for onMouseDown and onMouseUp.

In the actions native event properties like pageX,pageY,offsetX and offsetY to calculate new positions of the draggable div.

Let's create the styled wrapper first :

const StyledWrapper=styled.div`
    width: 200px;
    height: 120px;
    position: absolute;
    top: 40px;
    left: 227px;
    background-color: rgb(0,0,0,0.5);
    cursor:pointer;
    z-index:100;
    padding-top:20px;
  `

We will return this wrapper, from this component. Within that wrapper we will add other required div elements.

<StyledWrapper>
    <div style={{
            color:'white',
            backgroundColor:'red',
            width:200,
            height:70,
            paddingTop:30,
            textAlign:'center',
            fontWeight:'bolder'
   }}>recompile.in</div>
</StyledWrapper>

Well at this point wrapper div along with other div elements are ready but this whole div is not draggable yet, for that we are going to add actions to it.

 const moveWindow = event => {
    const eventTarget = event.target
    eventTarget.style.left = `${event.pageX-offsetX}px`
    eventTarget.style.top = `${event.pageY-offsetY}px`
 }
 const addWindow = event => {
    const eventTarget=event.target
    offsetX = event.clientX-eventTarget.getBoundingClientRect().left
    offsetY = event.clientY-eventTarget.getBoundingClientRect().top
    eventTarget.addEventListener('mousemove',moveWindow)
 }
 const removeWindow = event => {
    const eventTarget = event.target
    eventTarget.removeEventListener('mousemove',moveWindow)
 }

Now we will add them in Wrapper div.

<StyledWrapper onMouseDown={addWindow} onMouseUp={removeWindow}>
        <div style={{
            color:'white',
            backgroundColor:'red',
            width:200,
            height:70,
            paddingTop:30,
            textAlign:'center',
            fontWeight:'bolder'
        }}>recompile.in</div>
 </StyledWrapper>

Final DragWindow component code :

import React from 'react'
import styled from 'styled-components'

const DragWindow = ()=> {
  let offsetX,offsetY
  const moveWindow = event => {
    const eventTarget = event.target
    eventTarget.style.left = `${event.pageX-offsetX}px`
    eventTarget.style.top = `${event.pageY-offsetY}px`
  }
  const addWindow = event => {
    const eventTarget=event.target
    offsetX = event.clientX-eventTarget.getBoundingClientRect().left
    offsetY = event.clientY-eventTarget.getBoundingClientRect().top
    eventTarget.addEventListener('mousemove',moveWindow)
  }
  const removeWindow = event => {
    const eventTarget = event.target
    eventTarget.removeEventListener('mousemove',moveWindow)
  }
  const StyledWrapper=styled.div`
    width: 200px;
    height: 120px;
    position: absolute;
    top: 40px;
    left: 227px;
    background-color: rgb(0,0,0,0.5);
    cursor:pointer;
    z-index:100;
    padding-top:20px;
  `
  return (
    <StyledWrapper onMouseDown={addWindow} onMouseUp={removeWindow}>
        <div style={{
            color:'white',
            backgroundColor:'red',
            width:200,
            height:70,
            paddingTop:30,
            textAlign:'center',
            fontWeight:'bolder'
        }}>recompile.in</div>
    </StyledWrapper>
  )
}

export default DragWindow;

Now we can render this component from App.js

import React from 'react';
import DragWindow from './components/DragWindow'
const App = () =>{
  return (
    <div>
      <DragWindow />
    </div>
  );
}
export default App;

Well, we are done now, you can test the code. Thanks for your time.