Items
The Sortable allows you to disable its items and to move items between two or more Sortable components.
Disabled Items
To disable items, use the disabledIndexes
property of the Sortable.
Transfer 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 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
. 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. Custom solutions can be implemented by utlizing the SortableService
and the Sortable's events and methods.
The following example demonstrates how to enable the dragging of items between different item lists.