Auto Scroll

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.

Disabling the Auto Scroll

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

• Set the autoScroll argument to the useDraggable hook.

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

• Set the autoScroll property of the Draggable component.

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