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 utilizedappendTo
—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.
Custom Hint
To render a custom hint, provide a HintSettings
parameter and set the hintTemplate
option.
The following example demonstrates this approach.