New to Kendo UI for Angular? Start a free 30-day trial

Drag Hint

The Drag Hint is an element that gets dynamically created when the drag action starts. It is used for the purpose of dragging instead of the drag target element itself.

To render a drag hint when dragging, configure the hint option ot the DragTarget directive. It accepts both boolean and HintSettings parameters. The default value of the hint option is false. When the option is enabled, the default rendered hint will be a copy of the drag target.

If you use a HintSettings parameter, the DragTarget enables you to configure the following options:

hintTemplate—Renders the passed template as a hint of the current DragTarget (used to create custom hints).
hintClass—The CSS classes that will be rendered on the hint host element when the default hint is utilized
appendTo—Specifies the container the hint will be appended to. By default, the hint is appended to the document body.

Default Hint

Setting the hint option to true will render an exact copy of the DragTarget element by default. The default hint can be customized by providing a HintSettings parameter and setting the hintClass option. This allows you to render a custom CSS class on the hint element.

The following example demonstrates how to render a copy of the original element during drag.

Change Theme

Theme

Loading ...

Custom Hint

To render a custom hint, provide a HintSettings parameter and set the hintTemplate option.

The following example demonstrates this approach.