HelpBot Assistant

How can I help you?

Drag and drop in EJ2 TypeScript

6 Feb 20269 minutes to read

Drag and drop is a user interface feature that allows users to select an item or items and 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® JavaScript controls support drag and drop functionality through two libraries: Draggable and Droppable.

Draggable

The Syncfusion® Draggable library allows any DOM element to be made draggable by passing it as a parameter to the Draggable constructor. This is useful for creating interactive and user-friendly interfaces, such as allowing a user to reorder items in a list by dragging them. The following code snippet enables draggable functionality for the specific DOM element passed to the Draggable constructor.

import {Draggable} from  '@syncfusion/ej2-base';

 let dragElement: HTMLElement = document.getElementById('element1');
 let draggable: Draggable = new Draggable(dragElement,{ clone: false });
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Draggable</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-base/styles/material.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='loader'>Loading....</div>
    <div id='container'>
        <div id='element1'><p>Draggable Element </p></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. This can be achieved by setting the clone property to true. The following example demonstrates how to create a clone of a draggable element.

import {Draggable} from  '@syncfusion/ej2-base';

 let dragElement: HTMLElement = document.getElementById('element1');
 let draggable: Draggable = new Draggable(dragElement,{ clone: true });
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Draggable</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-base/styles/material.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='loader'>Loading....</div>
    <div id='container'>
        <div id='element1'><p>Draggable Element </p></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 { Draggable, Droppable, DropEventArgs } from '@syncfusion/ej2-base';

let draggable: Draggable = new Draggable(document.getElementById('element1'), {
    clone: false, dragArea: "#droppable"
});
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Draggable</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-base/styles/material.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='loader'>Loading....</div>
    <div id='container'>
        <div id='droppable'>
            <p class='drop'><span>Drop Target </span></p></div>
    <div id='element1'><p class='drag-text'>Drag </p></div>

    </div>
</body>

</html>

Droppable

A droppable element refers to an area of a user interface that can receive a draggable element that is being moved by a user. The Syncfusion® Droppable library converts any DOM element into a droppable zone, which accepts draggable elements.

When a draggable element is moved over a droppable element, the drop event can be triggered. Details about the dropped element can be obtained through the event argument. Based on the event argument, the dragged element can be appended to the target element.

Refer to the following code snippet to enable droppable zones.

import { Draggable, Droppable, DropEventArgs } from '@syncfusion/ej2-base';

let draggable: Draggable = new Draggable(document.getElementById('element1'), {
    clone: false
});
let droppable: Droppable = new Droppable(document.getElementById('droppable'), {
    drop: (e: DropEventArgs) => {
        e.droppedElement.querySelector('.drag-text').textContent = 'Dropped';
    }
});
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Draggable</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-base/styles/material.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='loader'>Loading....</div>
    <div id='container'>
        <div id='droppable'>
            <p class='drop'><span>Drop Target </span></p></div>
    <div id='element1'><p class='drag-text'>Drag </p></div>

    </div>
</body>

</html>

See also