# Items

The Sortable supports the following capabilities for working with items:

<Row>
  <Column count={[24,24,12]}>
    <Component className="tile pd-b" href="#transferring-items">
      <ComponentTitle>Transferring Items</ComponentTitle>
      <ComponentDescription>Move items between two or more connected Sortable components using shared drag zones.</ComponentDescription>
    </Component>
  </Column>
  <Column count={[24,24,12]}>
    <Component className="tile pd-b" href="#using-interactive-elements">
      <ComponentTitle>Using Interactive Elements</ComponentTitle>
      <ComponentDescription>Allow drag-and-drop when dragging buttons, links, and other interactive elements.</ComponentDescription>
    </Component>
  </Column>
  <Column count={[24,24,12]}>
    <Component className="tile pd-b" href="#disabling-items">
      <ComponentTitle>Disabling Items</ComponentTitle>
      <ComponentDescription>Lock specific items in place so they cannot be dragged while other items remain sortable.</ComponentDescription>
    </Component>
  </Column>
  <Column count={[24,24,12]}>
    <Component className="tile pd-b" href="#managing-items-programmatically">
      <ComponentTitle>Managing Items Programmatically</ComponentTitle>
      <ComponentDescription>Add, remove, and reorder items through the component API without drag-and-drop.</ComponentDescription>
    </Component>
  </Column>
</Row>

## Transferring Items

To move items between two or more Sortable components, set the [`zone`](https://www.telerik.com/kendo-angular-ui/components/sortable/api/sortablecomponent#zone) property to the same value on each instance. All components that share a zone form a connected group and accept cross-list drag-and-drop.

When you use the [`SortableBindingDirective`](https://www.telerik.com/kendo-angular-ui/components/sortable/api/sortablebindingdirective), the directive handles the data transfer automatically—it removes the item from the source array and inserts it into the target array during the drag. To restrict which lists accept incoming items, set the [`acceptZones`](https://www.telerik.com/kendo-angular-ui/components/sortable/api/sortablecomponent#acceptzones) property to an array of allowed zone names.

The following example demonstrates a file organizer where documents move between an **Inbox** and a **Project Documents** folder. Both lists share `zone="files"`. A third **Archive** column uses a different zone but sets `[acceptZones]="['files']"` to accept items from the other two lists—items dragged into the archive cannot be moved back.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/sortable/transfer-items/source.txt)

## Using Interactive Elements

Interactive HTML elements such as `<a>`, `<button>`, `<select>`, and `<input>` block the Sortable drag when a user tries to drag while holding them.

To prevent this conflict, add `tabindex="-1"` and `draggable="false"` to interactive elements inside the item template. These attributes stop the elements from capturing focus and native drag events, so the Sortable drag works normally while the elements still respond to clicks.

The following example displays two rows of dashboard tiles. The first row applies the fix—its `<button>` and `<a>` elements have `tabindex="-1"` and `draggable="false"`, so dragging works even when starting from those elements. The second row uses the default behavior where dragging from the button or link area does not move the tile.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/sortable/reordering/source.txt)

## Managing Items Programmatically

The Sortable exposes methods that let you add, remove, and reorder items programmatically without drag-and-drop. Access the component instance through a template reference variable and call any of the following methods:

* [`addDataItem(item, index)`](https://www.telerik.com/kendo-angular-ui/components/sortable/api/sortablecomponent#adddataitem)—Inserts a new data item at the specified index.
* [`removeDataItem(index)`](https://www.telerik.com/kendo-angular-ui/components/sortable/api/sortablecomponent#removedataitem)—Removes the item at the specified index.
* [`moveItem(fromIndex, toIndex)`](https://www.telerik.com/kendo-angular-ui/components/sortable/api/sortablecomponent#moveitem)—Moves an item from one position to another.
* [`getActiveItem()`](https://www.telerik.com/kendo-angular-ui/components/sortable/api/sortablecomponent#getactiveitem)—Returns the currently active item during a drag operation.
* [`clearActiveItem()`](https://www.telerik.com/kendo-angular-ui/components/sortable/api/sortablecomponent#clearactiveitem)—Clears the active item and resets keyboard focus.

The following example demonstrates a task queue where you can add new tasks, move a selected task to the top or bottom of the list, and remove it. Tab into the list and use the arrow keys to select a task, then use the action buttons to control the queue.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/sortable/methods/source.txt)

## Disabling Items

To lock specific items in place, pass their positions to the [`disabledIndexes`](https://www.telerik.com/kendo-angular-ui/components/sortable/api/sortablecomponent#disabledindexes) property. Disabled items stay visible but ignore drag interactions. Other items can still reorder around them.

Use the [`disabledItemClass`](https://www.telerik.com/kendo-angular-ui/components/sortable/api/sortablecomponent#disableditemclass) or [`disabledItemStyle`](https://www.telerik.com/kendo-angular-ui/components/sortable/api/sortablecomponent#disableditemstyle) property to visually separate locked items from draggable ones—for example, by reducing opacity or adding a dashed border.

The following example renders a horizontal file grid. Pinned folders and the **Settings** tile are locked and display a lock badge to indicate they cannot be moved.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/sortable/disabled-items/source.txt)

## Suggested Links

* [Data Binding](https://www.telerik.com/kendo-angular-ui/components/sortable/binding)
* [Templates](https://www.telerik.com/kendo-angular-ui/components/sortable/templates)
* [API Reference of the Sortable](https://www.telerik.com/kendo-angular-ui/components/sortable/api/sortablecomponent)



<style>
.pd-b div:first-child {
  padding-top: 10px;
}
</style>