https://github.com/aurbano/react-dragger
Tiny React Dragging library (mobile ready)
https://github.com/aurbano/react-dragger
component drag draggable react reactjs touch-compatible
Last synced: about 1 year ago
JSON representation
Tiny React Dragging library (mobile ready)
- Host: GitHub
- URL: https://github.com/aurbano/react-dragger
- Owner: aurbano
- License: mit
- Created: 2017-07-12T20:30:13.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2018-03-20T12:45:41.000Z (about 8 years ago)
- Last Synced: 2025-04-19T08:21:27.763Z (about 1 year ago)
- Topics: component, drag, draggable, react, reactjs, touch-compatible
- Language: JavaScript
- Homepage: https://aurbano.github.io/react-dragger/
- Size: 941 KB
- Stars: 5
- Watchers: 1
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# React Dragger
> Tiny React Dragging library - mobile ready and with no dependencies!
[](https://travis-ci.org/aurbano/react-dragger)
[](https://www.npmjs.com/package/react-dragger)
[](https://coveralls.io/github/aurbano/react-dragger?branch=master)
[](https://www.npmjs.com/package/react-dragger)
[](https://www.npmjs.com/package/react-dragger)
[](https://www.codacy.com/app/aurbano/react-dragger)
I wrote this library because I couldn't find any existing one to make elements draggable super easily, ignoring where they are dropped.
In some cases you really need an unobtrusive way to make items draggable, this will do just that.
I use React-DnD a lot as well, but sometimes you really just want to make an element draggable :smile:
## Installation
```console
$ npm i react-dragger
```
Or if you prefer yarn
```console
$ yarn add react-dragger
```
## Usage
```jsx
```
### Props
Docs on each prop, see them in action in the example below.
#### `target`
Element that will be draggable. This is to scope the mouse/touch event handlers and make sure that it doesn't affect your whole web app.
It must be a React `ref`, it should also exist, so you may want to check if it's already initialized before rendering the `Dragger` component.
#### `onStart`
This will be fired when the element starts being dragged.
#### `onDrag`
This will be fired while the element is being dragged. It will receive an object with the `top` and `left` coordinates of the element.
```js
onDrag({
top: number,
left: number,
});
```
#### `onEnd`
This will be fired when the element stops being dragged.
#### `inverted` *(Optional)*
Whether you want the dragging to be inverted (drag mouse up -> element goes down)
## Example
This example was taken from [`example/app/src/Example.js`](https://github.com/aurbano/react-dragger/blob/master/example/app/src/Example.js) which you can see running at https://aurbano.eu/react-dragger/
```jsx
import React from 'react';
import Dragger from 'react-dragger';
import './react-dragger.css';
export default class Example extends React.PureComponent {
constructor() {
super();
this.state = {
ref: null,
dragState: 'waiting',
itemLocation: {
top: 10,
left: 260,
},
};
}
onStart = () => {
this.setState({
dragState: 'started',
});
};
onDrag = (itemLocation) => {
this.setState({
dragState: 'dragging',
itemLocation,
});
};
onEnd = () => {
this.setState({
dragState: 'ended',
});
};
render() {
const itemStyle = {
...this.state.itemLocation,
};
return (
State: { this.state.dragState }
this.setState({ ref }) } style={ itemStyle }>
Drag me!
{ this.state.ref && (
) }
);
}
}
```
## Contributing
Only edit the files in the `src` folder. I'll update `dist` manually before publishing new versions to npm.
To run the tests simply run `npm test`. Add tests as you see fit to the `test` folder, they must be called `{string}.test.js`.
## Meta
Copyright © [Alejandro U. Alvarez](https:/aurbano.eu) 2017. MIT Licensed.