🐭

JS で簡単にドラッグ

2025/05/01に公開

const elm = document.getElementById('hoge');
const handleMouseMove = (ev) => {
    if (ev.buttons) {
        const { scroller } = canvasRef.current || {};
        scroller?.scrollBy({
            left: -ev.movementX,
            top: -ev.movementY,
        });
    };
};

elm.addEventListener('mouseMove', handleMouseMove);

動かなかったらごめんなさい。

MDNのドキュメントをよもう!

ドラッグスクロール(であっているのか?)したいです。
web上で一般的なコードでは、mouseDown, mouseMove, mouseUpイベントを使うことが多いと思います。
mouseDown時に変数か、datasetにドラッグ中であることを示す値を入れておいて、
mouseMove時にドラッグ中であれば、イベントから変動値をとり、
mouseUp時にその値を元に戻すコードが組まれます。
しかしながら、三つのイベントリスナを設定し、というのは少しめんどくさいです。
Move時にマウスが押下されていることを判定できれば、mouseMoveイベントリスナだけで機能を作れるわけです。
event.buttonsを確認します。

仕様的に、何かのキーを押しながら操作されると、値が加えられていくみたいなので注意。

おわびとおねがい

すみません。この記事の完全なるコピーとなってしまいました。
申し訳ありません。見てください。

少しでもいいのでMDNのイベントに関するドキュメントを読んで、こんな機能があるのかと驚いてください。

MDNのドキュメントをよもう!

おわびとおねがい

Discussion