https://github.com/bufferapp/buffer-js-dragme
module for dragging components
https://github.com/bufferapp/buffer-js-dragme
Last synced: 11 months ago
JSON representation
module for dragging components
- Host: GitHub
- URL: https://github.com/bufferapp/buffer-js-dragme
- Owner: bufferapp
- License: mit
- Created: 2016-10-27T17:33:14.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2017-02-23T11:13:39.000Z (almost 9 years ago)
- Last Synced: 2024-10-16T02:32:57.800Z (over 1 year ago)
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/@bufferapp/dragme
- Size: 1.31 MB
- Stars: 2
- Watchers: 6
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# @bufferapp/dragme
[](https://www.npmjs.com/package/@bufferapp/dragme)
A super lightweight module for dragging elements using CSS3 Transforms. The goal of this module is to be a minimal way to make certain elements draggable on a page, i.e. modal windows.
Dragme makes use of some modern JS APIs – make sure to polyfill it depending on the browser support wanted:
- `Element.classList`
- `Object.assign()`
- `Element.closest()`
## Install
```
npm install @bufferapp/dragme
```
## Usage
```js
const dragMe = new DragMe(document.querySelector('#draggable-component'));
```
Prevent dragging on certain elements:
```js
const dragMe = new DragMe(document.querySelector('#draggable-component'), {
cancel: 'textarea, .button',
});
```
Cleanup bindings to disable a DragMe instance:
```js
dragMe.cleanup();
```
Listen to when dragging starts and stops using callbacks:
```js
const dragMe = new DragMe(document.querySelector('#draggable-component'), {
onDragStart: () => console.log('Started dragging'),
onDragEnd: () => console.log('Stopped dragging'),
});
```
## Roadmap
- [ ] Use requestAnimationFrame for smoother movement
## Contributing
Bug fixes or improvements welcome!
## Credits
This builds upon [jwilsson](https://github.com/jwilsson)'s non-jQuery fork of Buffer's [jQuery DragMe](https://github.com/bufferapp/jquery-dragme).