@progress/kendo-angular-utils
Version:
Kendo UI Angular utils component
43 lines (29 loc) • 5.65 kB
Markdown
<a href="https://www.telerik.com/kendo-angular-ui/components/utils" target="_blank">
<img width="631" src="https://demos.telerik.com/kendo-angular-ui/assets/banner/npm-banner.svg">
</a>
## Kendo UI for Angular Utilities Package
> * This package is part of the [Kendo UI for Angular](https://www.telerik.com/kendo-angular-ui/)—a commercial UI library.
> * You must [install a license key](https://www.telerik.com/kendo-angular-ui/my-license) when adding the package to your project. To receive a license key, either [purchase a license](https://www.telerik.com/purchase/kendo-ui) or register for a [free trial](https://www.telerik.com/download-login-v2-kendo-angular-ui).
> * The 30-day free trial gives you access to all the Kendo UI for Angular components and their full functionality. Additionally, for the period of your license, you get access to our legendary technical support provided directly by the Kendo UI for Angular team!
The Kendo UI for Angular Utilities deliver a Drag and Drop functionality that can be used with Angular components or regular HTML elements to enhance their performance and functionality. The Drag and Drop is built from the ground up and specifically for Angular, so that you get high-performance controls which integrate tightly with your application and with the rest of the Kendo UI for Angular components.
## Key Features
Among the many features which the Kendo UI for Angular Drag and Drop delivers are:
* Drag Target—The [`DragTarget`](https://www.telerik.com/kendo-angular-ui/components/utils/draganddrop/dragtarget) directive turns any HTML element or Angular component in a draggable item. This enables the user to change the position of the element by dragging it. The `DragTarget` can also be dropped on any [`DropTarget`](https://www.telerik.com/kendo-angular-ui/components/utils/draganddrop/droptarget).
* Drop Target—The [`DropTarget`](https://www.telerik.com/kendo-angular-ui/components/utils/draganddrop/droptarget) directive allows for any HTML element or Angular component to handle drag targets that dropped on it. The directive emits a number of events when a valid drag target interacts with it. This enables you to execute custom logic and fine tune the behavior.
* Drag Target Container—The [`DragTargetContainer`](https://www.telerik.com/kendo-angular-ui/components/utils/draganddrop/drag-container) directive is an extended [`DragTarget`](https://www.telerik.com/kendo-angular-ui/components/utils/draganddrop/dragtarget) directive. It enables you to configure multiple elements within а container as drag targets. Thе directive is also suitable when the drag target elements are not accessible in the template.
* Drop Target Container—The [`DropTargetContainer`](https://www.telerik.com/kendo-angular-ui/components/utils/draganddrop/drop-container) directive is an extended [`DropTarget`](https://www.telerik.com/kendo-angular-ui/components/utils/draganddrop/droptarget) directive. It enables you to configure multiple elements within the container as drop targets. This directive is also suitable when the drop target elements are not accessible in the template.
* Auto Scroll and Axis Lock—The Drag and Drop allows you to automatically scroll the nearest scrollable parent element while also providing an option to restrict the drag either to the horizontal or the vertical axis. Read more about the [auto scroll](https://www.telerik.com/kendo-angular-ui/components/utils/draganddrop/autoscroll) and [axis lock](https://www.telerik.com/kendo-angular-ui/components/utils/draganddrop/axis) features.
* Drag Hint—The Drag and Drop utility allows you to dynamically create and customize an element that can be used for the purpose of dragging instead of the drag target element itself. [Read more about the drag hint element...](https://www.telerik.com/kendo-angular-ui/components/utils/draganddrop/hint)
## Support Options
For any issues you might encounter while working with the Kendo UI for Angular Drag and Drop, you have the following support channels available:
* Industry-leading technical support—Kendo UI for Angular paid license holders and users with an active (free) trial license can take advantage of our outstanding customer support. To submit a ticket, use the [dedicated Kendo UI for Angular support system](https://www.telerik.com/account/support-center/contact-us/technical-support).
* Product forums—The [Kendo UI for Angular forums](https://www.telerik.com/forums/kendo-angular-ui) are part of the free support you can get from the community and from the Kendo UI for Angular team.
* Feedback portal—The [Kendo UI for Angular feedback portal](https://feedback.telerik.com/kendo-angular-ui) is where you can request and vote for new features to be added.
## Resources
* [Getting Started with Kendo UI for Angular](https://www.telerik.com/kendo-angular-ui/getting-started)
* [Getting Started with the Kendo UI for Angular Utilities](https://www.telerik.com/kendo-angular-ui/components/utils/installation/getting-started)
* [Demos, documentation, and component reference](https://www.telerik.com/kendo-angular-ui/components)
* [Blogs](http://www.telerik.com/blogs/kendo-ui)
* [Kendo UI for Angular pricing and licensing](https://www.telerik.com/purchase/kendo-ui)
*Copyright © 2025 Progress Software Corporation and/or one of its subsidiaries or affiliates. All rights reserved.*
*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.*