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.

  jsx

  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.

Change Theme

Theme

Loading ...

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.

Change Theme

Theme

Loading ...

Suggested Links

• Getting Started with the KendoReact Layout Package
• API Reference of the useDraggable hook
• API Reference of the useDroppable hook
• API Reference of the Draggable Component
• API Reference of the Droppable Component
• API Reference of the DragAndDrop Component