All Components

Components / Sortable

Keyboard Navigation

The keyboard navigation of the Sortable is always available.

The Sortable supports the following keyboard shortcuts:

SHORTCUT DESCRIPTION
Right/Down Arrow Sets the focus on the next available item.
Left/Up Arrow Sets the focus on the previously available item.
Ctrl/⌘+Right/Down Arrow Moves the focused item after the next item.
Ctrl/⌘+Left/Up Arrow Moves the focused item before the previous item. 
import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <div class="example-config">
        <h6>Items: {{items | json}}</h6>
    </div>
    <div class="container-fluid">
        <kendo-sortable
            [kendoSortableBinding]="items"
            [navigatable]="true"
            [animation] = "true"
            class="row"
            itemClass="item col-xs-6 col-sm-3"
            activeItemClass="item col-xs-6 col-sm-3 active"
        >
        </kendo-sortable>
    </div>
  `,
  encapsulation: ViewEncapsulation.None,
  styleUrls: ['styles.css']
})
export class AppComponent {
  public items: string[] = [
    'Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6', 'Item 7', 'Item 8'
  ];
}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { SortableModule } from '@progress/kendo-angular-sortable';
import { AppComponent } from './app.component';

@NgModule({
    bootstrap:    [AppComponent],
    declarations: [AppComponent],
    imports:      [BrowserModule, BrowserAnimationsModule, SortableModule]
})
export class AppModule {}


.item {
    background-color: #bfe7f9;
    color: #1494d0;
    border: 1px solid #fff;
    height: 70px;
    line-height: 68px;
    font-size: 16px;
    text-align: center;
    outline: none;
    cursor: move;
}

.item:hover,
.employee:hover {
    opacity: 0.8;
}

.item.active,
.employee.active {
    background-color: #27aceb;
    color: #fff;
    border-color: #27aceb;
    z-index: 10;
}

.item.disabled {
    opacity: 0.5;
    cursor: default;
}

.team {
    min-height: 240px;
    padding-top: 15px;
    padding-bottom: 15px;
    border: 1px solid #fff;
    background-color: #dff3fc;
}

.team-b {
    background-color: #fbe0e7;
}

.employee {
    background-color: #bfe7f9;
    color: #1494d0;
    margin: 1px;
    padding: 5px;
    cursor: move;
}

.team-b .employee {
    background-color: #f3b9c9;
    color: #dd4672;
}

.team-b .employee.active {
    background-color: #dd4672;
    color: #fff;
}

.empty {
    height: 150px;
}
import { AppModule } from './app.module';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);
In this article