| layout | post |
|---|---|
| title | Drag and Drop in Angular Kanban Control | Syncfusion |
| description | Learn here about Drag and Drop with Syncfusion Essential Angular Kanban control, its elements, and more. |
| documentation | ug |
| platform | angular |
| keywords | drag and drop,kanban drag and drop |
By default allowDragAndDrop is true.Cards can be transited from one column to another column, by dragging and dropping. And it has drop position indicator which enables easier positioning of cards
N> It is not possible transit cards to other swim lanes through Drag and Drop.
Prioritizing cards is easy with drag-and-drop re-ordering that helps you to categorize most important work at the top.Cards can be categorized with priority by mapping specific database field into fields.priority property.
RankId defined in the dataSource which is consist priority of cards. The RankId will be changed while card ordering changes through Drag and Drop and Editing.
The following code example describes the above behavior.
{% highlight html %}
<ej-kanban [dataSource]="kanbanData" keyField="Status" fields.content="Summary" fields.primaryKey="Id" fields.priority="RankId">
{% endhighlight %}
{% highlight html %}
import { Component } from '@angular/core'; import { NorthwindService } from '../../services/northwind.service';
@Component({ selector: 'ej-app', templateUrl: 'app/components/kanban/default.component.html', providers: [NorthwindService] }) export class DefaultComponent { public kanbanData: any; constructor(private northwindService: NorthwindService) { this.kanbanData = northwindService.getTasks(); } }
{% endhighlight %}
The following output is displayed as a result of the above code example.
