Skip to content
🏎️ A React component that makes a child component draggable
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
__test__
assets Update package version, refactor Jan 25, 2019
.babelrc Update deps, update webpack config, refactor Aug 8, 2018
.editorconfig Refactor, simplify Jun 21, 2016
.eslintrc
.gitignore Update deps, update webpack config, refactor Aug 8, 2018
README.md
demo.html first commit Feb 24, 2016
index.js
karma.conf.js Update deps, update webpack config, refactor Aug 8, 2018
package-lock.json
package.json
webpack.config.js Update package version, refactor Jan 25, 2019
webpack.production.config.js

README.md

react-draggable-component

A wrapper React component that adds draggable functionality to an element using transform3d. Works with touch devices.

to install

npm i react-draggable-component

to run demo

npm start

or

yarn start

Then navigate to http://localhost:3000/demo.html

to run tests

npm test

or

yarn test

to build

npm run build

or

yarn run build

requirements

react prop-types

usage

import React from 'react';
import Draggable from 'react-draggable-component';

<Draggable>
  <div className='draggable-content'>DRAG</div>
</Draggable>

props

additionalClass {String} // A string of additional classnames to add to the element
bounds {Object} // An array of coordinates, forming a square, that the user cannot drag the component   outside of, in the format {x1: Number, y1: Number, x2: Number, y2: Number}
contentPosition {String} // The css positioning for for the element (i.e. 'absolute' or 'fixed', defaults to 'absolute')
disabled {Boolean} // If the component is disabled
dragCallback {Function} // A callback function while the user is dragging
dragStartCallback {Function} // A callback function for when the user starts dragging
dragStopCallback {Function} // A callback function for when the user stops dragging
dragLeaveCallback {Function} // A callback function for when the user is dragging and the mouse/touch leaves the draggable component
lock {String} // An axis to lock element to when dragging, either 'x' or 'y'
position {Object} // An object with x and y values for the content
preventDefaultEvents {Boolean} // Whether to prevent default mouse/touch events
touchScrollLock {String} // If set to true, prevents the content from being dragged if the user is scrolling in the opposite direction on a touch device
You can’t perform that action at this time.