CKDragHelper

A simple dragging helper library

이 스크립트는 직접 설치하는 용도가 아닙니다. 다른 스크립트에서 메타 지시문 // @require https://update.greasyfork.org/scripts/428694/945686/CKDragHelper.js을(를) 사용하여 포함하는 라이브러리입니다.

이 스크립트를 설치하려면 Tampermonkey, Greasemonkey 또는 Violentmonkey와 같은 확장 프로그램이 필요합니다.

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

이 스크립트를 설치하려면 Tampermonkey 또는 Violentmonkey와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 Tampermonkey 또는 Userscripts와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 Tampermonkey와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 유저 스크립트 관리자 확장 프로그램이 필요합니다.

(이미 유저 스크립트 관리자가 설치되어 있습니다. 설치를 진행합니다!)

이 스타일을 설치하려면 Stylus와 같은 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 Stylus와 같은 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 Stylus와 같은 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 유저 스타일 관리자 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 유저 스타일 관리자 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 유저 스타일 관리자 확장 프로그램이 필요합니다.

(이미 유저 스타일 관리자가 설치되어 있습니다. 설치를 진행합니다!)

// ==UserScript==
// @name         CKDragHelper
// @namespace    dragger.ckylin.site
// @version      0.1
// @author       CKylinMC
// @grant        unsafeWindow
// @license      GPLv3 License
// ==/UserScript==
if(!("wait" in window)){
    window.wait = (t) => {
        return new Promise(r => setTimeout(r, t));
    }
}
const dragger = {
    defaultHandler: (val) => console.log("DRAG:", val),
    waitForDragger: async (waitStatus = true) => {
        while (dragger.dragging !== waitStatus) await wait(10);
        return dragger;
    },
    regHandler: async (func) => {
        if (!(func instanceof Function)) throw "Param must be a func!";
        await dragger.waitForDragger(false);
        dragger.handler = func;
        return dragger;
    },
    handler: () => {
    },
    dragging: false,
    initialDragData: {
        x: 0,
        y: 0
    },
    lastDragData: {
        x: 0,
        y: 0
    },
    startDrag: (e) => {
        if (dragger.dragging) return;
        dragger.dragging = true;
        console.log(dragger.initialDragData);
        dragger.initialDragData.x = e.screenX;
        dragger.initialDragData.y = e.screenY;
        dragger.lastDragData.x = e.screenX;
        dragger.lastDragData.y = e.screenY;
        document.body.addEventListener("mouseup", dragger.stopDrag);
        document.body.addEventListener("mousemove", dragger.handleDrag);
        console.info("DRAG:", "Start Drag");
        return dragger;
    },
    handleDrag: (e) => {
        const currPos = {
            x: e.screenX,
            y: e.screenY
        };
        const initPos = dragger.initialDragData;
        const delta = {
            x: initPos.x - currPos.x,
            y: initPos.y - currPos.y
        }
        const lastdelta = {
            x: dragger.lastDragData.x - currPos.x,
            y: dragger.lastDragData.y - currPos.y
        }
        dragger.lastDragData = currPos;
        dragger.handler(delta, lastdelta);
    },
    stopDrag: () => {
        document.body.removeEventListener("mouseup", dragger.stopDrag);
        document.body.removeEventListener("mousemove", dragger.handleDrag);
        dragger.handler = dragger.defaultHandler;
        console.info("DRAG:", "Stop Drag");
        dragger.dragging = false;
        return dragger;
    },
}