Drag and drop in EJ2 TypeScript Chips control

25 Mar 20256 minutes to read

The Chips control 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 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.

import { ChipList } from '@syncfusion/ej2-buttons';

// Initialize and Render Chip control

new ChipList({
    chips: [
        { text: 'Report', cssClass: 'e-info' },
        { text: 'Meeting', cssClass: 'e-warning' },
        { text: 'Review', cssClass: 'e-warning' },
        { text: 'Budget', cssClass: 'e-danger' },
        { text: 'Design', cssClass: 'e-primary' },
        { text: 'Presentation', cssClass: 'e-success' },
        { text: 'Email', cssClass: 'e-success' },
        { text: 'Research', cssClass: 'e-success' }
    ],
    allowDragAndDrop: true,
}, '#choice-container');

new ChipList({
    chips: [],
    allowDragAndDrop: true 
}, '#selection-container');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Chip</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="https://cdn.syncfusion.com/ej2/29.1.33/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/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="chip-draganddrop-wrapper">
        <div class="chips-headers">To-do lists</div>

        <div class="sample-padding">
            <div id="choice-container" aria-label="choice-chips"></div>
            <div id="selection-container" aria-label="selection-chips"></div>
        </div>
    </div>

    <script src="index.ts" type="text/javascript"></script>

    <style>
        #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);
        }
    </style>
</body>

</html>