ES Drager

Dragging

Learn how to use ES Drager's dragging functionality.

Basic Dragging

By default, any Drager component can be dragged by clicking and holding:

Drag me!
Drag me too!

Tips: Middle mouse button to pan canvas, Ctrl + Scroll to zoom

Movement Constraints

You can limit the movement area using the limit prop:

Constrained Area
Limited move

Drag Events

ES Drager provides three events for drag interactions:

  • onDragStart - Called when dragging begins
  • onDrag - Called continuously while dragging
  • onDragEnd - Called when dragging ends
Check console

Open your browser's console to see the events being fired.