Implementing A Basic Drag Functionality In ReactJS

Based on the create-react-app template, I'm trying to implement a very basic drag / drop scenario. My App.js currently looks like this: import React, { Component } from 'react'; i

Solution 1:

This can be a core implementation of the drag behaviour in React. It needs enhancements of course, plus does not handle dropping yet:

const { useRef } = React

const App = () => {
  const elemRef = useRef(null)
  const dragProps = useRef()
  
  const initialiseDrag = event => {
    const { target, clientX, clientY } = event
    const { offsetTop, offsetLeft } = target
    const { left, top } = elemRef.current.getBoundingClientRect()
    
    dragProps.current = {
      dragStartLeft: left - offsetLeft,
      dragStartTop: top - offsetTop,
      dragStartX: clientX,
      dragStartY: clientY
    }
    window.addEventListener('mousemove', startDragging, false)
    window.addEventListener('mouseup', stopDragging, false)
  }
  
  
  const startDragging = ({ clientX, clientY }) => {    
    elemRef.current.style.transform = `translate(${dragProps.current.dragStartLeft + clientX - dragProps.current.dragStartX}px, ${dragProps.current.dragStartTop + clientY - dragProps.current.dragStartY}px)`
  } 

  const stopDragging = () => {
    window.removeEventListener('mousemove', startDragging, false)
    window.removeEventListener('mouseup', stopDragging, false)
  }
  
  return (
    <div
      onMouseDown={initialiseDrag}
      ref={elemRef}
      >
      DragMe
    </div>
  )
}

ReactDOM.render(<App />, document.getElementById('root'));

div {
  cursor: grab;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Solution 2:

As I cannot run your current ReactJS application, I have pieced together a short example to show different instances of the drag and drop functionality.

As you can see by the example setting the draggable attribute to your element should make the element draggable, as it would look dragging an image on a typical webpage.

Can you confirm that when dragging your element, it doesn't move at all as seen in the code snippet for the not draggable box?

var draggable = document.getElementById('draggable');

function onDragStart(event) {
    event.dataTransfer.setData('text/html', null); //cannot be empty string
    var counter = document.getElementById('counter');
    counter.innerText = parseInt(counter.innerText, 10) + 1;
}

draggable.addEventListener('dragstart', onDragStart, false);

#draggable{
    width: 100px;
    height: 100px;
    background: blue;
    margin: 10px 5px;
}

#notdraggable{
    width: 100px;
    height: 100px;
    background: red;
    margin: 10px 5px;
}

#draggableNDT{
      width: 100px;
    height: 100px;
    background: green;
    margin: 10px 5px;
} 

   <div>Draggable (<span id='counter'>0</span>)</div>
    <div id='draggable' draggable='true'></div>
    
    <div><pre>Draggable (No DataTransfer)</div>
    <div id='draggableNDT' draggable></div>
    
    <div><pre>Not Draggable</div>
    <div id='notdraggable' draggable='false'></div>

Solution 3:

You can checkout react-draggable library, just wrap component in Draggable component

Install npm i react-draggable

Import import Draggable from 'react-draggable'

Usage:

<Draggable 
   axis="both"
   cancel="input, textarea, span, label"
>
  <div style={myStyle}>test</div>
</Draggable>