A simple dragging helper.

Usage

Step1: Register dragging callback function

To handle a dragging action, you must have a callback function to handle each move event. This funciton will be called each MouseMoveEvent and will recieve two objects uses like below:

window.dragger.regHandler(/* func here */ (delta, lastdelta)=>{  })

• param delta: Will return an object contains x and y which are the difference with the drag start point.
• param lastdelta: Will return an object contains x and y which are the difference with the last delta value.

Noticed that callback function will be erased when dragging action is over (mouse up event) and need to re-register for next call.

Step2: Start handling dragging

Now dragger knows how to process dragging actions, you only need to tell it when to start. It usually be a MouseDownEvent or something like that, you need to pass a paramater to the startup method which contains screenX and screenY attributes, it could be a MouseEvent or an object you created manually. Here is a simple sample showing the usages that when clicked a dom then start dragging:

let dom = document.querySelector("#something")
dom.onclick = e=>{
e.preventDefault()
window.dragger.startDrag(e)
}