New to Kendo UI for Angular? Start a free 30-day trial

Items

The Sortable allows you to disable its items and to move items between two or more Sortable components.

Disabling Items

To disable items, use the disabledIndexes property of the Sortable.

Example
View Source
Change Theme:

Transferring of Items

To enable the user to move and transfer items between two or more Sortable components by dragging and dropping, utilize the drag zones of the components and set the zone and acceptZones properties.

When an item is dragged from the source to the target component, hide the currently active item in the source Sortable through the visible:false and display:none inline styles. While the dragging of the item happens, the item is removed from the source component on dragEnd (mouse up) and added to the target component on dragOver (mouse release). As a result, between the dragEnd and the dragOver actions, and at the same time, in both the source and the target Sortable components two identical items exist. This functionality is handled by the SortableBindingDirective directive. You can implement custom solutions by utilizing the SortableService and the events and methods of the Sortable.

The following example demonstrates how to enable the dragging of items between different item lists.

Example
View Source
Change Theme:

Reordering of Items

To enable the reordering of items, mark some of the elements in the item template as draggable—for example, button and a.

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <kendo-sortable [kendoSortableBinding]="items">
      <ng-template let-item="item">
        <button draggable="true">
          {{item}}
        </button>
      </ng-template>
    </kendo-sortable>
  `
})
export class AppComponent {
  public items: string[] = [
    'Item 1', 'Item 2', 'Item 3', 'Item 4'
  ];
}