CKDragHelper

A simple dragging helper library

Ce script ne doit pas être installé directement. C'est une librairie destinée à être incluse dans d'autres scripts avec la méta-directive // @require https://update.greasyfork.org/scripts/428694/945686/CKDragHelper.js

Vous devrez installer une extension telle que Tampermonkey, Greasemonkey ou Violentmonkey pour installer ce script.

You will need to install an extension such as Tampermonkey or Violentmonkey to install this script.

Vous devrez installer une extension telle que Tampermonkey ou Violentmonkey pour installer ce script.

Vous devrez installer une extension telle que Tampermonkey ou Userscripts pour installer ce script.

Vous devrez installer une extension telle que Tampermonkey pour installer ce script.

Vous devrez installer une extension de gestionnaire de script utilisateur pour installer ce script.

(J'ai déjà un gestionnaire de scripts utilisateur, laissez-moi l'installer !)

Vous devrez installer une extension telle que Stylus pour installer ce style.

Vous devrez installer une extension telle que Stylus pour installer ce style.

Vous devrez installer une extension telle que Stylus pour installer ce style.

Vous devrez installer une extension du gestionnaire de style pour utilisateur pour installer ce style.

Vous devrez installer une extension du gestionnaire de style pour utilisateur pour installer ce style.

Vous devrez installer une extension du gestionnaire de style pour utilisateur pour installer ce style.

(J'ai déjà un gestionnaire de style utilisateur, laissez-moi l'installer!)

Auteur
CKylinMC
Version
0.1
Créé
30/06/2021
Mis à jour
30/06/2021
Taille
2,23 ko
Licence
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)
}