CKDragHelper

A simple dragging helper library

此腳本不應該直接安裝,它是一個供其他腳本使用的函式庫。欲使用本函式庫,請在腳本 metadata 寫上: // @require https://update.greasyfork.org/scripts/428694/945686/CKDragHelper.js

作者
CKylinMC
版本
0.1
建立日期
2021-06-30
更新日期
2021-06-30
授權條款
GPLv3 License

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)
}