@bufferapp/dragme
v0.2.2
Published
A lightweight module for dragging elements using CSS transforms
Downloads
41
Maintainers
Keywords
Readme
@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
const dragMe = new DragMe(document.querySelector('#draggable-component'));
Prevent dragging on certain elements:
const dragMe = new DragMe(document.querySelector('#draggable-component'), {
cancel: 'textarea, .button',
});
Cleanup bindings to disable a DragMe instance:
dragMe.cleanup();
Listen to when dragging starts and stops using callbacks:
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's non-jQuery fork of Buffer's jQuery DragMe.