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

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

to run tests

npm test

to build

npm run build

usage

import React from 'react';
import ReactDOM from 'react-dom';
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