@bufferapp/dragme

0.2.2 • Public • Published

@bufferapp/dragme

NPM Version

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.

Readme

Keywords

none

Package Sidebar

Install

npm i @bufferapp/dragme

Weekly Downloads

19

Version

0.2.2

License

MIT

Last publish

Collaborators

  • davidluhr
  • egomezd
  • jacobchadwell
  • philippemiguet
  • josemdev
  • msanroman
  • daisymarie128
  • hamstu
  • stevenc81
  • bufferbot
  • mayauribe
  • esclapes
  • ay8s
  • mickmahady
  • dinostheo
  • hitherejoe
  • dace
  • erickhun
  • kmbriseno
  • kiriappeee
  • cmunozgar
  • peteremilbuffer
  • arekpn
  • abeeb
  • buffermw