Drag and drop in React Chips component

26 Mar 202510 minutes to read

The Chips component enables drag and drop functionality for any chip when allowDragAndDrop is set to true. Chips can be dragged and dropped within the same or across external ChipList containers.

When dragging a chip, an indicator line appears between chips, showing the exact position where the chip will be dropped. This visual indicator helps users place chips precisely at the desired location.

• To prevent the dragging action for a specific chip, use the dragStart event, which triggers when chip dragging begins. Similarly, to prevent dropping action for a specific chip, use the dragStop event, which triggers when dragging ends.

• The dragging event triggers while a chip is being dragged. You can customize the appearance of the cloned chip element during this event.

• You can set the drag area for the chips using the dragArea property which allows the dragging of cloned chip only within the specified element. It accepts an element Id or class as a string and defaults to null.

In the following sample, the allowDragAndDrop property is enabled.

app.jsx

import * as React from 'react';
import * as ReactDom from 'react-dom';
import { ChipListComponent, ChipsDirective, ChipDirective } from '@syncfusion/ej2-react-buttons';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

// To render Chip.
function App() {
    return (
        <div id="chip-draganddrop-wrapper">
            <div class="chips-headers">To-do lists</div>
            <div class="sample-padding">
                <ChipListComponent id="choice-container" allowDragAndDrop={true}>
                    <ChipsDirective>
                        <ChipDirective text = 'Report' cssClass = 'e-info'></ChipDirective>
                        <ChipDirective text = 'Meeting' cssClass = 'e-warning'></ChipDirective>
                        <ChipDirective text = 'Review' cssClass = 'e-warning'></ChipDirective>
                        <ChipDirective text = 'Budget' cssClass = 'e-danger'></ChipDirective>
                        <ChipDirective text = 'Design' cssClass = 'e-primary'></ChipDirective>
                        <ChipDirective text = 'Presentation' cssClass = 'e-success'></ChipDirective>
                        <ChipDirective text = 'Email' cssClass = 'e-success'></ChipDirective>
                        <ChipDirective text = 'Research' cssClass = 'e-success'></ChipDirective>
                    </ChipsDirective>
                </ChipListComponent>
                <ChipListComponent id="selection-container" allowDragAndDrop={true}></ChipListComponent>
            </div>
        </div>
    );
}
export default App;
ReactDom.render(<App />, document.getElementById('chip'));

app.tsx

import * as React from 'react';
import * as ReactDom from 'react-dom';
import { ChipListComponent, ChipsDirective, ChipDirective } from '@syncfusion/ej2-react-buttons';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

// To render Chip.
function App() {
    return (
        <div id="chip-draganddrop-wrapper">
            <div class="chips-headers">To-do lists</div>
            <div class="sample-padding">
                <ChipListComponent id="choice-container" allowDragAndDrop={true}>
                    <ChipsDirective>
                        <ChipDirective text = 'Report' cssClass = 'e-info'></ChipDirective>
                        <ChipDirective text = 'Meeting' cssClass = 'e-warning'></ChipDirective>
                        <ChipDirective text = 'Review' cssClass = 'e-warning'></ChipDirective>
                        <ChipDirective text = 'Budget' cssClass = 'e-danger'></ChipDirective>
                        <ChipDirective text = 'Design' cssClass = 'e-primary'></ChipDirective>
                        <ChipDirective text = 'Presentation' cssClass = 'e-success'></ChipDirective>
                        <ChipDirective text = 'Email' cssClass = 'e-success'></ChipDirective>
                        <ChipDirective text = 'Research' cssClass = 'e-success'></ChipDirective>
                    </ChipsDirective>
                </ChipListComponent>
                <ChipListComponent id="selection-container" allowDragAndDrop={true}></ChipListComponent>
            </div>
        </div>
    );
}
export default App;
ReactDom.render(<App />, document.getElementById('chip'));

index.css

#chip-draganddrop-wrapper .sample-padding {
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.chips-headers {
    font-size: 12px;
    text-align: center;
    padding-top: 10px;
}

#choice-container {
    width: 400px;
    min-height: 100px;
    min-width: 150px;
    border: 2px solid #2C3E50;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin-right: 30px;
}

#selection-container {
    width: 400px;
    min-height: 100px;
    min-width: 150px;
    border: 2px solid #8E44AD;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Chips</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="https://cdn.syncfusion.com/ej2/29.1.33/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-react-buttons/styles/material.css" rel="stylesheet" />
    <link href="index.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='chip'>
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>