Drag and Drop in React
20 Aug 202516 minutes to read
Drag and drop is a feature of a user interface that allows users to select an item or items and then move them to a different location or onto another interface element by “dragging” the selected item(s) with a pointing device (such as a mouse) and then “dropping” them at the desired location.
Syncfusion® React components support drag and drop feature through two libraries. These are Draggable and Droppable.
Draggable
The Syncfusion’s Draggable library allows users to make any DOM element draggable by passing it as a parameter to the Draggable constructor. This can be useful for creating interactive and user-friendly interfaces, such as allowing a user to reorder items in a list by dragging them. The below code snippet enables the draggable functionality for the specific DOM element passed to the Draggable constructor.
import * as React from 'react';
import { useEffect } from 'react';
import * as ReactDom from 'react-dom';
import { Draggable } from '@syncfusion/ej2-base';
function App() {
useEffect(() => {
let draggable = new Draggable(document.getElementById('element'), { clone: false });
}, []);
return (<div id='container'>
<div id='element'><p>Draggable Element</p></div>
</div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('sample'));import * as React from 'react';
import { useEffect } from 'react';
import * as ReactDom from 'react-dom';
import { Draggable } from '@syncfusion/ej2-base';
function App() {
useEffect(() => {
let draggable: Draggable = new Draggable(document.getElementById('element'),{ clone: false });
},[])
return (
<div id='container'>
<div id='element'><p>Draggable Element</p></div>
</div>
);
}
export default App;
ReactDom.render(<App />, document.getElementById('sample'));<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Button</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='sample'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>Clone draggable element
Syncfusion® provides the option to create a clone of a draggable element while the user is dragging it. It can be achieved by setting the clone property to true. Here’s an example of how to create a clone of a draggable element.
import * as React from 'react';
import { useEffect } from 'react';
import * as ReactDom from 'react-dom';
import { Draggable } from '@syncfusion/ej2-base';
function App() {
useEffect(() => {
let draggable = new Draggable(document.getElementById('element'), { clone: true });
}, []);
return (<div id='container'>
<div id='element'><p>Draggable Element</p></div>
</div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('sample'));import * as React from 'react';
import { useEffect } from 'react';
import * as ReactDom from 'react-dom';
import { Draggable } from '@syncfusion/ej2-base';
function App() {
useEffect(() => {
let draggable: Draggable = new Draggable(document.getElementById('element'),{ clone: true });
},[])
return (
<div id='container'>
<div id='element'><p>Draggable Element</p></div>
</div>
);
}
export default App;
ReactDom.render(<App />, document.getElementById('sample'));<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Button</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='sample'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>Drag area
A drag area is a specific area within a user interface that is designated for drag and drop operations. When an object or element is dragged within a drag area, certain actions or events may be triggered. The user can specify the drag area by using the dragArea property. Refer to the below sample.
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { useEffect } from 'react';
import { Draggable } from '@syncfusion/ej2-base';
function App() {
useEffect(() => {
let draggable = new Draggable(document.getElementById('draggable'), { clone: false, dragArea: "#droppable" });
}, []);
return (<div id='container'>
<div id='droppable'><p>Drag Area </p></div>
<div id='draggable'><p id='drag'>Draggable Element </p></div>
</div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('sample'));import * as React from 'react';
import * as ReactDom from 'react-dom';
import { useEffect } from 'react';
import { Draggable } from '@syncfusion/ej2-base';
function App() {
useEffect(() => {
let draggable: Draggable = new Draggable(document.getElementById('draggable'),{ clone: false, dragArea: "#droppable" });
},[])
return (
<div id='container'>
<div id='droppable'><p>Drag Area </p></div>
<div id='draggable'><p id='drag'>Draggable Element </p></div>
</div>
);
}
export default App;
ReactDom.render(<App />, document.getElementById('sample'));<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Button</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='sample'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>Droppable
A droppable zone is a designated area within the interface that accepts draggable elements. The Droppable library enables any DOM element to become a droppable target.
When a draggable element is released over a droppable, the drop event is triggered. Details about the dropped element are available through the event arguments, allowing dynamic updates such as appending, moving, or highlighting elements in the target area.
Refer to the following code snippet to enable droppable zones.
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { useEffect } from 'react';
import { Draggable, Droppable } from '@syncfusion/ej2-base';
function App() {
useEffect(() => {
let draggable = new Draggable(document.getElementById('draggable'), { clone: false });
let droppable = new Droppable(document.getElementById('droppable'), {
drop: (e) => {
e.droppedElement.querySelector('#drag').textContent = 'Dropped';
}
});
}, []);
return (<div id='container'>
<div id='droppable'><p>Droppable Target </p></div>
<div id='draggable'><p id='drag'>Draggable Element </p></div>
</div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('sample'));import * as React from 'react';
import * as ReactDom from 'react-dom';
import { useEffect } from 'react';
import { Draggable, Droppable, DropEventArgs } from '@syncfusion/ej2-base';
function App() {
useEffect(() => {
let draggable: Draggable = new Draggable(document.getElementById('draggable'),{ clone: false });
let droppable: Droppable = new Droppable(document.getElementById('droppable'), {
drop: (e: DropEventArgs) => {
e.droppedElement.querySelector('#drag').textContent = 'Dropped';
}
});
},[])
return (
<div id='container'>
<div id='droppable'><p>Droppable Target </p></div>
<div id='draggable'><p id='drag'>Draggable Element </p></div>
</div>
);
}
export default App;
ReactDom.render(<App />, document.getElementById('sample'));<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Button</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='sample'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>