Making Element Draggable In React JS

In this article, we will learn how to integrate login with Facebook react js.

– First of all, we have to create a react application.

– Add the below package to the react application.

npm i react-draggable

– A draggable element wraps an existing element and extends it with new event handlers and styles. It does not create a wrapper element in the DOM.

– Draggable items are moved using CSS Transforms. This allows items to be dragged regardless of their current positioning (relative, absolute, or static). Elements can also be moved between drags without incident.

– The draggable is working in :-

• Draggable in both X and Y axis
• Draggable in only X axis
• Draggable in only Y axis

– Now open your app.js file and add the below code:

import logo from './logo.svg';
import './App.css';
import Draggable from 'react-draggable';

function App() {
  return (
    <>
    <div>
      <h3>both X and Y axis</h3>
      <Draggable>
        <table border={1}>
          <tr><th>id</th><th>name</th></tr>
          <tr><td>1</td><td>a</td></tr>
        </table>
      </Draggable>
    </div>
    <div >
      <h3>X axis</h3>
      <Draggable axis='x'>
        <table border={1}>
          <tr><th>id</th><th>name</th></tr>
          <tr><td>1</td><td>b</td></tr>
        </table>
      </Draggable>
    </div>
    <div style={{border:"1px solid", textAlign:"center"}}>
      <h3>Y axis</h3>
      <Draggable axis='y'>
        <table border={1}>
          <tr><th>id</th><th>name</th></tr>
          <tr><td>1</td><td>c</td></tr>
        </table>
      </Draggable>
    </div>
    </>
  );
}

export default App;

Output:-