ES Drager

Getting Started
Features
API

Rotation

ES Drager provides built-in rotation functionality that can be enabled with a single prop.

Basic Rotation

Enable rotation by setting the rotatable prop. A rotation handle will appear above the element:

Rotate me!
<Drager
  style={{
    width: '128px',
    height: '128px',
    backgroundColor: '#3B82F6',
    borderRadius: '8px',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    color: 'white'
  }}
  rotatable
>
  Rotate me!
</Drager>

Drag the rotation handle above the element to rotate it.

Initial Rotation

You can set an initial rotation angle using the rotation prop (in degrees):

45° Rotation
<Drager
  style={{
    width: '128px',
    height: '128px',
    backgroundColor: '#3B82F6',
    borderRadius: '8px',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    color: 'white'
  }}
  rotatable
  rotation={45}
>
  45° Rotation
</Drager>

Rotation Events

Track rotation changes using the onRotate event handler:

Check console
<Drager
  style={{
    width: '128px',
    height: '128px',
    backgroundColor: '#3B82F6',
    borderRadius: '8px',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    color: 'white'
  }}
  rotatable
  onRotate={(angle) => {
    console.log('Current angle:', angle)
  }}
>
  Check console
</Drager>

Open your browser's console to see the rotation angle being logged.

Combined with Dragging

Rotation works seamlessly with dragging and other features:

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