draggable-el

a lib to make element draggable

Usage no npm install needed!

<script type="module">
  import draggableEl from 'https://cdn.skypack.dev/draggable-el';
</script>

README

DraggableEl

npm building license

Browser Support

This lib uses transform-function, requestAnimationFrame. Their compatibilities are:

Chrome, Firefox, Safari, Edge15, IE10

Usage

demo

  1. download package
npm i --save draggable-el
  1. import with require or <script>
let DraggableEl = require('draggable-el')

or

<script src="./node_modules/draggable-el/dist/DraggableEl.min.js"></script>
  1. initialize/destroy instance
  • initialize instance
let config = {
  dragButton: document.getElementById('app__drag_el'),
  dragEl: document.getElementById('app__drag_bo')
}
let instance1 = new DraggableEl(config)

more about config

  • destroy instance
instance1.destroy()
  • destroy all instances
instance1.destroyAll()

Config

Warning

  • If rotate is in your transform or default mode is not good, set isLeftTop:true in your config.

Other Shiny Libs

TODO

  • support npm
  • support browser
  • add tests
  • support mobile touch behavior
  • add readme config
  • avoid overwrite transform other values