Items
The Sortable supports the following capabilities for working with items:
Transferring Items
To move items between two or more Sortable components, set the 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, 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 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.
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.
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)—Inserts a new data item at the specified index.removeDataItem(index)—Removes the item at the specified index.moveItem(fromIndex, toIndex)—Moves an item from one position to another.getActiveItem()—Returns the currently active item during a drag operation.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.
Disabling Items
To lock specific items in place, pass their positions to the disabledIndexes property. Disabled items stay visible but ignore drag interactions. Other items can still reorder around them.
Use the disabledItemClass or 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.