ES Drager

Getting Started
Features
API

Quick Start

Get started with ES Drager in just a few minutes.

Basic Usage

Import the Drager component and use it to wrap any content you want to make draggable:

Drag me!
Me too!
import { Drager } from '@es-space/es-drager-react'

function App() {
  return (
    <Drager
      style={{
        width: '128px',
        height: '128px',
        backgroundColor: '#3B82F6'
      }}
    >
      Drag me!
    </Drager>
  )
}

Adding Features

Enable rotation, scaling, and skewing with simple props:

Try all features!
<Drager
  style={{
    width: '128px',
    height: '128px',
    backgroundColor: '#3B82F6',
    borderRadius: '8px',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center'
  }}
  rotatable
  scalable
  minScale={0.5}
  maxScale={2}
>
  Try all features!
</Drager>

Adding Connections

Enable connection points to create node-based interfaces:

Node 1
Node 2
<Drager
  id="node-1"
  style={{
    width: '128px',
    height: '128px',
    backgroundColor: '#3B82F6',
    borderRadius: '8px',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center'
  }}
  connectable
  onConnect={(connection) => {
    console.log('Connected:', connection)
  }}
>
  Node 1
</Drager>