Drag and drop in Angular Chips component

27 Mar 20254 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.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ChipListModule } from '@syncfusion/ej2-angular-buttons'
import { Component, OnInit } from '@angular/core';

@Component({
  imports: [
    ChipListModule
  ],
  standalone: true,
  selector: 'my-app',
  // specifies the template string for the Chip component
  template: `
    <div id="chip-draganddrop-wrapper">
      <div id="chips" class="chips-headers">To-do lists</div>
      <div class="sample-padding">
        <ejs-chiplist id="choice-container" [allowDragAndDrop]="true">
          <e-chips>
            <e-chip text = 'Report' cssClass = 'e-info'></e-chip>
            <e-chip text = 'Meeting' cssClass = 'e-warning'></e-chip>
            <e-chip text = 'Review' cssClass = 'e-warning'></e-chip>
            <e-chip text = 'Budget' cssClass = 'e-danger'></e-chip>
            <e-chip text = 'Design' cssClass = 'e-primary'></e-chip>
            <e-chip text = 'Presentation' cssClass = 'e-success'></e-chip>
            <e-chip text = 'Email' cssClass = 'e-success'></e-chip>
            <e-chip text = 'Research' cssClass = 'e-success'></e-chip>
          </e-chips>
        </ejs-chiplist>
        <ejs-chiplist id="selection-container" [allowDragAndDrop]="true"></ejs-chiplist>
      </div>
    </div>`
})
export class AppComponent {

}

style.css

@import 'node_modules/@syncfusion/ej2-angular-base/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-buttons/styles/material.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);
  }

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));