32r7s2skrgm9ubva?svg=true ![npm downloads]()

A simple component for making elements draggable.

``

js



  I can now be moved around!





- Demo

- Changelog



------



#### Technical Documentation



- Installing

- Exports

- Draggable

- Draggable Usage

- Draggable API

- Controlled vs. Uncontrolled

- DraggableCore

- DraggableCore API







$3

bash

$ npm install react-draggable





If you aren't using browserify/webpack, a

UMD version of react-draggable is available. It is updated per-release only.

This bundle is also what is loaded when installing from npm. It expects external

React and ReactDOM

.



If you want a UMD version of the latest

master

 revision, you can generate it yourself from master by cloning this

repository and running

$ make. This will create umd dist files in the dist/

 folder.



$3



The default export is

. At the .DraggableCore property is

.

Here's how to use it:

js

// ES6

import Draggable from 'react-draggable'; // The default

import {DraggableCore} from 'react-draggable'; // 

import Draggable, {DraggableCore} from 'react-draggable'; // Both at the same time



// CommonJS

let Draggable = require('react-draggable');

let DraggableCore = Draggable.DraggableCore;

 element wraps an existing element and extends it with new event handlers and styles.

It does not create a wrapper element in the DOM.



Draggable items are moved using CSS Transforms. This allows items to be dragged regardless of their current

positioning (relative, absolute, or static). Elements can also be moved between drags without incident.



If the item you are dragging already has a CSS Transform applied, it will be overwritten by

. Use

an intermediate wrapper (

...

) in this case.



$3



View the Demo and its

source for more.

js

import React from 'react';

import ReactDOM from 'react-dom';

import Draggable from 'react-draggable';



class App extends React.Element {



  eventLogger = (e: MouseEvent, data: Object) => {

    console.log('Event: ', event);

    console.log('Data: ', data);

  };



  render() {

    return (

              axis="x"

        handle=".handle"

        defaultPosition={{x: 0, y: 0}}

        position={null}

        grid={[25, 25]}

        zIndex={100}

        onStart={this.handleStart}

        onDrag={this.handleDrag}

        onStop={this.handleStop}>

        

          Drag from here

          This readme is really dragging on...

        

      

    );

  }

}



ReactDOM.render(, document.body);





$3



The

 component transparently adds draggability to its children.



Note: Only a single child is allowed or an Error will be thrown.



For the

 component to correctly attach itself to its child, the child element must provide support

for the following props:

-

style

 is used to give the transform css to the child.

-

className

 is used to apply the proper classes to the object being dragged.

-

onMouseDown, onMouseUp, onTouchStart, and onTouchEnd

  are used to keep track of dragging state.



React.DOM elements support the above properties by default, so you may use those elements as children without

any changes. If you wish to use a React component you created, you'll need to be sure to

transfer prop.



####

 Props:

js

//

// Types:

//

type DraggableEventHandler = (e: Event, data: DraggableData) => void | false;

type DraggableData = {

  node: HTMLElement,

  // lastX + deltaX === x

  x: number, y: number,

  deltaX: number, deltaY: number,

  lastX: number, lastY: number

};



//

// Props:

//

{

// If set to

true

, will allow dragging on non left-button clicks.

allowAnyClick: boolean,



// Determines which axis the draggable can move. This only affects

// flushing to the DOM. Callbacks will still include all values.

// Accepted values:

// -

both

 allows movement horizontally and vertically (default).

// -

 limits movement to horizontal axis.

// -

 limits movement to vertical axis.

// - 'none' stops all movement.

axis: string,



// Specifies movement boundaries. Accepted values:

// -

parent

 restricts movement within the node's offsetParent

//    (nearest node with position relative or absolute), or

// - a selector, restricts movement within the targeted node

// - An object with

left, top, right, and bottom

 properties.

//   These indicate how far in each direction the draggable

//   can be moved.

bounds: {left: number, top: number, right: number, bottom: number} | string,



// Specifies a selector to be used to prevent drag initialization.

// Example: '.body'

cancel: string,



// Class names for draggable UI.

// Default to 'react-draggable', 'react-draggable-dragging', and 'react-draggable-dragged'

defaultClassName: string,

defaultClassNameDragging: string,

defaultClassNameDragged: string,



// Specifies the

x and y

 that the dragged item should start at.

// This is generally not necessary to use (you can use absolute or relative

// positioning of the child directly), but can be helpful for uniformity in

// your callbacks and with css transforms.

defaultPosition: {x: number, y: number},



// If true, will not call any drag handlers.

disabled: boolean,



// Specifies the x and y that dragging should snap to.

grid: [number, number],



// Specifies a selector to be used as the handle that initiates drag.

// Example: '.handle'

handle: string,



// If desired, you can provide your own offsetParent for drag calculations.

// By default, we use the Draggable's offsetParent. This can be useful for elements

// with odd display types or floats.

offsetParent: HTMLElement,



// Called whenever the user mouses down. Called regardless of handle or

// disabled status.

onMouseDown: (e: MouseEvent) => void,



// Called when dragging starts. If

false

 is returned any handler,

// the action will cancel.

onStart: DraggableEventHandler,



// Called while dragging.

onDrag: DraggableEventHandler,



// Called when dragging stops.

onStop: DraggableEventHandler,



// Much like React form elements, if this property is present, the item

// becomes 'controlled' and is not responsive to user input. Use

position



// if you need to have direct control of the element.

position: {x: number, y: number}

}







Note that sending

className, style, or transform

 as properties will error - set them on the child element

directly.





Controlled vs. Uncontrolled

 is a 'batteries-included' component that manages its own state. If you want to completely

control the lifecycle of the component, use

.



For some users, they may want the nice state management that

 provides, but occasionally want

to programmatically reposition their components.

 allows this customization via a system that

is similar to how React handles form components.



If the prop

position: {x: number, y: number} is defined, the

 will ignore its internal state and use

the provided position instead. Alternatively, you can seed the position using

defaultPosition

. Technically, since

works only on position deltas, you could also seed the initial position using CSS top/left

.



We make one modification to the React philosophy here - we still allow dragging while a component is controlled.

We then expect you to use at least an

onDrag or onStop

 handler to synchronize state.



To disable dragging while controlled, send the prop

disabled={true} - at this point the

 will operate

like a completely static component.





For users that require absolute control, a

 element is available. This is useful as an abstraction

over touch and mouse events, but with full control.

 has no internal state.



See React-Resizable and

React-Grid-Layout for some usage examples.

 is a useful building block for other libraries that simply want to abstract browser-specific

quirks and receive callbacks when a user attempts to move an element. It does not set styles or transforms

on itself and thus must have callbacks attached to be useful.



$3

 takes a limited subset of options:

js

{

  allowAnyClick: boolean,

  cancel: string,

  disabled: boolean,

  enableUserSelectHack: boolean,

  offsetParent: HTMLElement,

  grid: [number, number],

  handle: string,

  onStart: DraggableEventHandler,

  onDrag: DraggableEventHandler,

  onStop: DraggableEventHandler,

  onMouseDown: (e: MouseEvent) => void

}





Note that there is no start position.

simply calls drag

 handlers with the below parameters,

indicating its position (as inferred from the underlying MouseEvent) and deltas. It is up to the parent

to set actual positions on

.



Drag callbacks (

onStart, onDrag, onStop) are called with the same arguments as

.



----



$3



- Fork the project

- Run the project in development mode:

$ npm run dev



- Make changes.

- Add appropriate tests

-

$ npm test



- If tests don't pass, make them pass.

- Update README with appropriate docs.

- Commit and PR



$3



- Update CHANGELOG

-

make release-patch, make release-minor, or make-release-major

make publish`

$3

MIT

React-Draggable ![Build Status](https://travis-ci.org/mzabriskie/react-draggable) !https://ci.appveyor.com/api/projects/status/32r7s2skrgm9ubva?svg=true ![npm downloads]()

I can now be moved around!

bash
$ npm install react-draggable

If you aren't using browserify/webpack, a
UMD version of react-draggable is available. It is updated per-release only.
This bundle is also what is loaded when installing from npm. It expects external

and

.

If you want a UMD version of the latest

revision, you can generate it yourself from master by cloning this
repository and running

. This will create umd dist files in the

folder.

$3

The default export is

. At the .DraggableCore property is

.

Here's how to use it:

js

// ES6

import Draggable from 'react-draggable'; // The default

import {DraggableCore} from 'react-draggable'; // 

import Draggable, {DraggableCore} from 'react-draggable'; // Both at the same time



// CommonJS

let Draggable = require('react-draggable');

let DraggableCore = Draggable.DraggableCore;

 element wraps an existing element and extends it with new event handlers and styles.

It does not create a wrapper element in the DOM.



Draggable items are moved using CSS Transforms. This allows items to be dragged regardless of their current

positioning (relative, absolute, or static). Elements can also be moved between drags without incident.



If the item you are dragging already has a CSS Transform applied, it will be overwritten by

. Use

an intermediate wrapper (

...

) in this case.



$3



View the Demo and its

source for more.

js

import React from 'react';

import ReactDOM from 'react-dom';

import Draggable from 'react-draggable';



class App extends React.Element {



  eventLogger = (e: MouseEvent, data: Object) => {

    console.log('Event: ', event);

    console.log('Data: ', data);

  };



  render() {

    return (

              axis="x"

        handle=".handle"

        defaultPosition={{x: 0, y: 0}}

        position={null}

        grid={[25, 25]}

        zIndex={100}

        onStart={this.handleStart}

        onDrag={this.handleDrag}

        onStop={this.handleStop}>

        

          Drag from here

          This readme is really dragging on...

        

      

    );

  }

}



ReactDOM.render(, document.body);





$3



The

 component transparently adds draggability to its children.



Note: Only a single child is allowed or an Error will be thrown.



For the

 component to correctly attach itself to its child, the child element must provide support

for the following props:

-

style

 is used to give the transform css to the child.

-

className

 is used to apply the proper classes to the object being dragged.

-

onMouseDown, onMouseUp, onTouchStart, and onTouchEnd

  are used to keep track of dragging state.



React.DOM elements support the above properties by default, so you may use those elements as children without

any changes. If you wish to use a React component you created, you'll need to be sure to

transfer prop.



####

 Props:

js

//

// Types:

//

type DraggableEventHandler = (e: Event, data: DraggableData) => void | false;

type DraggableData = {

  node: HTMLElement,

  // lastX + deltaX === x

  x: number, y: number,

  deltaX: number, deltaY: number,

  lastX: number, lastY: number

};



//

// Props:

//

{

// If set to

true

, will allow dragging on non left-button clicks.

allowAnyClick: boolean,



// Determines which axis the draggable can move. This only affects

// flushing to the DOM. Callbacks will still include all values.

// Accepted values:

// -

both

 allows movement horizontally and vertically (default).

// -

 limits movement to horizontal axis.

// -

 limits movement to vertical axis.

// - 'none' stops all movement.

axis: string,



// Specifies movement boundaries. Accepted values:

// -

parent

 restricts movement within the node's offsetParent

//    (nearest node with position relative or absolute), or

// - a selector, restricts movement within the targeted node

// - An object with

left, top, right, and bottom

 properties.

//   These indicate how far in each direction the draggable

//   can be moved.

bounds: {left: number, top: number, right: number, bottom: number} | string,



// Specifies a selector to be used to prevent drag initialization.

// Example: '.body'

cancel: string,



// Class names for draggable UI.

// Default to 'react-draggable', 'react-draggable-dragging', and 'react-draggable-dragged'

defaultClassName: string,

defaultClassNameDragging: string,

defaultClassNameDragged: string,



// Specifies the

x and y

 that the dragged item should start at.

// This is generally not necessary to use (you can use absolute or relative

// positioning of the child directly), but can be helpful for uniformity in

// your callbacks and with css transforms.

defaultPosition: {x: number, y: number},



// If true, will not call any drag handlers.

disabled: boolean,



// Specifies the x and y that dragging should snap to.

grid: [number, number],



// Specifies a selector to be used as the handle that initiates drag.

// Example: '.handle'

handle: string,



// If desired, you can provide your own offsetParent for drag calculations.

// By default, we use the Draggable's offsetParent. This can be useful for elements

// with odd display types or floats.

offsetParent: HTMLElement,



// Called whenever the user mouses down. Called regardless of handle or

// disabled status.

onMouseDown: (e: MouseEvent) => void,



// Called when dragging starts. If

false

 is returned any handler,

// the action will cancel.

onStart: DraggableEventHandler,



// Called while dragging.

onDrag: DraggableEventHandler,



// Called when dragging stops.

onStop: DraggableEventHandler,



// Much like React form elements, if this property is present, the item

// becomes 'controlled' and is not responsive to user input. Use

position



// if you need to have direct control of the element.

position: {x: number, y: number}

}







Note that sending

className, style, or transform

 as properties will error - set them on the child element

directly.





Controlled vs. Uncontrolled

 is a 'batteries-included' component that manages its own state. If you want to completely

control the lifecycle of the component, use

.



For some users, they may want the nice state management that

 provides, but occasionally want

to programmatically reposition their components.

 allows this customization via a system that

is similar to how React handles form components.



If the prop

position: {x: number, y: number} is defined, the

 will ignore its internal state and use

the provided position instead. Alternatively, you can seed the position using

defaultPosition

. Technically, since

works only on position deltas, you could also seed the initial position using CSS top/left

.



We make one modification to the React philosophy here - we still allow dragging while a component is controlled.

We then expect you to use at least an

onDrag or onStop

 handler to synchronize state.



To disable dragging while controlled, send the prop

disabled={true} - at this point the

 will operate

like a completely static component.





For users that require absolute control, a

 element is available. This is useful as an abstraction

over touch and mouse events, but with full control.

 has no internal state.



See React-Resizable and

React-Grid-Layout for some usage examples.

 is a useful building block for other libraries that simply want to abstract browser-specific

quirks and receive callbacks when a user attempts to move an element. It does not set styles or transforms

on itself and thus must have callbacks attached to be useful.



$3

 takes a limited subset of options:

js

{

  allowAnyClick: boolean,

  cancel: string,

  disabled: boolean,

  enableUserSelectHack: boolean,

  offsetParent: HTMLElement,

  grid: [number, number],

  handle: string,

  onStart: DraggableEventHandler,

  onDrag: DraggableEventHandler,

  onStop: DraggableEventHandler,

  onMouseDown: (e: MouseEvent) => void

}





Note that there is no start position.

simply calls drag

 handlers with the below parameters,

indicating its position (as inferred from the underlying MouseEvent) and deltas. It is up to the parent

to set actual positions on

.



Drag callbacks (

onStart, onDrag, onStop) are called with the same arguments as

.



----



$3



- Fork the project

- Run the project in development mode:

$ npm run dev



- Make changes.

- Add appropriate tests

-

$ npm test



- If tests don't pass, make them pass.

- Update README with appropriate docs.

- Commit and PR



$3



- Update CHANGELOG

-

make release-patch, make release-minor, or make-release-major

make publish`

$3

MIT

react-draggable-mfma

React-Draggable ![Build Status](https://travis-ci.org/mzabriskie/react-draggable) !https://ci.appveyor.com/api/projects/status/32r7s2skrgm9ubva?svg=true ![npm downloads]()

$3

$3

$3

$3

Controlled vs. Uncontrolled

$3

$3

$3

$3

react-draggable-mfma

React-Draggable ![Build Status](https://travis-ci.org/mzabriskie/react-draggable) !https://ci.appveyor.com/api/projects/status/32r7s2skrgm9ubva?svg=true ![npm downloads]()

$3

$3

$3

$3

Controlled vs. Uncontrolled

$3

$3

$3

$3