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.

  Copy Code    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.

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.

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