Drag and Drop

24 Jun 2022 / 2 minutes to read

Drag and Drop is supported through two libraries. Those are Draggable and Droppable. Draggable makes DOM to be dragged using mouse or touch gestures and Droppable mark required DOM as droppable zone.

Initializing draggable

You can make any element draggable by passing the element to Draggable constructor. Refer the following code snippet to enable draggable for the DOM element

Source

Preview

index.jsx

index.html

index.tsx

import * as React from 'react';
import * as ReactDom from 'react-dom';
import { Draggable } from '@syncfusion/ej2-base';
class App extends React.Component {
    componentDidMount() {
        let draggable = new Draggable(document.getElementById('element'), { clone: false });
    }
    render() {
        return (<div id='container'>
          <div id='element'><p>Draggable Element</p></div>
          </div>);
    }
}
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="//cdn.syncfusion.com/ej2/20.1.58/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>
</head>

<body>
        <div id='sample'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>

import * as React from 'react';
import * as ReactDom from 'react-dom';
import { Draggable } from '@syncfusion/ej2-base';

class App extends React.Component<{}, {}> {
    public componentDidMount(): void {
        let draggable:Draggable = new Draggable(document.getElementById('element'),{clone: false});
        }

  render() {
      return (
          <div id='container'>
          <div id='element'><p>Draggable Element</p></div>
          </div>
      );
  }
}
ReactDom.render(<App />, document.getElementById('sample'));

Creating droppable zone

You can convert any DOM element as a droppable zone, which accepts the draggable elements. Refer the following code snippet to enable droppable zone.

Source

Preview

index.jsx

index.html

index.tsx

import * as React from 'react';
import * as ReactDom from 'react-dom';
import { Droppable } from '@syncfusion/ej2-base';
class App extends React.Component {
    componentDidMount() {
        let droppable = new Droppable(document.getElementById('droppable'));
    }
    render() {
        return (<div id='container'>
          <div id='droppable'><p>Droppable Element</p></div>
          </div>);
    }
}
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="//cdn.syncfusion.com/ej2/20.1.58/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>
</head>

<body>
        <div id='sample'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>

import * as React from 'react';
import * as ReactDom from 'react-dom';
import { Droppable } from '@syncfusion/ej2-base';

class App extends React.Component<{}, {}> {
    public componentDidMount(): void {
        let droppable: Droppable = new Droppable(document.getElementById('droppable'));
    }

  render() {
      return (
          <div id='container'>
          <div id='droppable'><p>Droppable Element</p></div>
          </div>
      );
  }
}
ReactDom.render(<App />, document.getElementById('sample'));

Defining Drop Action

To define a drop action set drop callback function during droppable object creation. You can get details of dropped element through dropped element property in event argument. Refer the following code snippet to use basic drag and drop action

Source

Preview

index.jsx

index.html

index.tsx

import * as React from 'react';
import * as ReactDom from 'react-dom';
import { Draggable, Droppable } from '@syncfusion/ej2-base';
class App extends React.Component {
    componentDidMount() {
        let draggable = new Draggable(document.getElementById('draggable'), { clone: false });
        let droppable = new Droppable(document.getElementById('droppable'), {
            drop: (e) => {
                e.droppedElement.querySelector('#drag').textContent = 'Dropped';
            }
        });
    }
    render() {
        return (<div id='container'>
           <div id='droppable'><p>Droppable Target </p></div>
           <div id='draggable'><p id='drag'>Draggable Element </p></div>
          </div>);
    }
}
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="//cdn.syncfusion.com/ej2/20.1.58/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>
</head>

<body>
        <div id='sample'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>

import * as React from 'react';
import * as ReactDom from 'react-dom';
import { Draggable, Droppable, DropEventArgs } from '@syncfusion/ej2-base';

class App extends React.Component<{}, {}> {
    public componentDidMount(): void {
        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';
            }
        });
    }

  render() {
      return (
          <div id='container'>
           <div id='droppable'><p>Droppable Target </p></div>
           <div id='draggable'><p id='drag'>Draggable Element </p></div>
          </div>
      );
  }
}
ReactDom.render(<App />, document.getElementById('sample'));

Contents

Initializing draggable
Creating droppable zone
Defining Drop Action

Contents

Initializing draggable
Creating droppable zone
Defining Drop Action