Auto Scroll

Premium

By default, the KendoReact useDraggable hook and Draggable component will scroll the nearest scrollable parent element whenever the drag reaches any of it's edges.

Use the scrollX and scrollY arguments from the Drag&Drop callbacks to correctly calculate the new position of the element.

The following example demonstrates how the Auto Scroll functionality behaves in a scrollable container.

Change Theme

Theme

Loading ...

Disabling the Auto Scroll

To disable the Auto Scroll functionality, use either of the following approaches:

• Set the autoScroll argument to the useDraggable hook.

  jsx

  useDraggable(element, { ...callbacks }, { autoScroll: false });

• Set the autoScroll property of the Draggable component.

  jsx

  <Draggable autoScroll={false}>
      <div>Drag Me!</div>
  </Draggable>

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