K-Drag

High performance drag component.

Install

$ npm install k-drag

Quick Example

example

<style>
  #box {
    position: absolute;
    width: 60px;
    height: 60px;
    background-color: #369;
  }
</style>
<div id="box"></div>
<script src='k-drag.js'></script>
<script>
  var box = document.querySelector('#box')

  kDrag.bind(box)

  var x = 0, y = 0

  box.addEventListener('k.dragstart', function () {
    console.log('dragstart')
  })

  box.addEventListener('k.drag', function (e) {
    x += e.stepX
    y += e.stepY

    box.style.left = x + 'px'
    box.style.top = y + 'px'
  })

  box.addEventListener('k.dragend', function () {
    console.log('dragend')
  })
</script>

Events

• k.dragstart
• k.drag
• k.dragSync(sync version of k.drag, k.drag is an async event)
• k.dragend

Event Arguments

• pageX
• pageY
• deltaX
• deltaY
• stepX
• stepY
• vx
• vy
• pointerType
• prevent
• state
• ctrlKey
• dragTarget
• originalEvent