The Sortable package requires the following peer dependencies that have to be installed by your application:

@angular/common

@angular/core

@progress/kendo-angular-l10n

rxjs

The version of the @angular/animations module has to be exactly the same as the version of the other @angular modules that are included in your project. To sync the package versions, you might need to run npm update.

To enable the user to transfer items between different Sortables by dragging and dropping them between the lists, 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.

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

Get Involved

Progress, Telerik, and certain product names used herein are trademarks or registered trademarks of Progress Software Corporation and/or one of its subsidiaries or affiliates in the U.S. and/or other countries. See Trademarks for appropriate markings.