ES Drager

Getting Started
Features
API

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!
<Drager
  style={{
    width: '128px',
    height: '128px',
    backgroundColor: '#3B82F6',
    borderRadius: '8px',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    color: 'white'
  }}
>
  Drag me!
</Drager>

Movement Constraints

You can limit the movement area using the limit prop:

Constrained Area
Limited move
<Drager
  style={{
    width: '128px',
    height: '128px',
    backgroundColor: '#3B82F6',
    borderRadius: '8px',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    color: 'white'
  }}
  limit={{
    minX: 0,
    maxX: 272, // container width - element width
    minY: 0,
    maxY: 172  // container height - element height
  }}
>
  Limited move
</Drager>

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
<Drager
  style={{
    width: '128px',
    height: '128px',
    backgroundColor: '#3B82F6',
    borderRadius: '8px',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    color: 'white'
  }}
  onDragStart={() => {
    console.log('Started dragging')
  }}
  onDrag={(pos) => {
    console.log('Current position:', pos)
  }}
  onDragEnd={() => {
    console.log('Finished dragging')
  }}
>
  Check console
</Drager>

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