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 } = ReactconstApp = () => {
  const elemRef = useRef(null)
  const dragProps = useRef()
  
  constinitialiseDrag = 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)
  }
  
  
  conststartDragging = ({ clientX, clientY }) => {    
    elemRef.current.style.transform = `translate(${dragProps.current.dragStartLeft + clientX - dragProps.current.dragStartX}px, ${dragProps.current.dragStartTop + clientY - dragProps.current.dragStartY}px)`
  } 

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

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

div {
  cursor: grab;
}

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.1/umd/react.production.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.1/umd/react-dom.production.min.js"></script><divid="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');

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

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

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

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

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

<div>Draggable (<spanid='counter'>0</span>)</div><divid='draggable'draggable='true'></div><div><pre>Draggable (No DataTransfer)</div><divid='draggableNDT'draggable></div><div><pre>Not Draggable</div><divid='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:

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