Drag Hint

You can configure the KendoReact useDraggable hook and Draggable component to use a different component for collision detection than the one registered for drag.

To configure a different component for collision detection, use either of the following approaches:

  • Pass the hint argument to the useDraggable hook.

        useDraggable(
            element,
            { ...callbacks },
            { hint: handle }
        )
  • Set the hint property of the Draggable component.

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

Example
View Source
Change Theme:

Drag Handle

The following example demonstrates how to implement a drag handle by enabling dragging only through the move icon, while using the whole element for collision detection.

Example
View Source
Change Theme:

In this article

Not finding the help you need?