ドラッグを判定するjavascript
- 2020.06.07
- javascript
![ドラッグを判定するjavascript](https://mukuchi.work/admin/wp-content/uploads/2020/06/00.png)
マウスをクリックした時の位置を取得。
マウスを離した時の位置を取得。
マウスを離した時に、クリックした位置と離した位置の差を測り、一定以上だったらドラッグしたものと判定。
'use strict'; // クリック開始位置を取得 var startX; document.body.addEventListener('mousedown', function (e) { startX = e.pageX; }); // クリック終了位置を取得して、クリック開始位置と比較 var endX; document.body.addEventListener('mouseup', function (e) { endX = e.pageX; // 差が5以上だったらアラート出す if (Math.abs(endX - startX) >= 5) { alert('ドラッグ!'); } });
デモはこちら。
画面場でドラッグすると、アラートで「ドラッグ!」と出ます。
スマホの場合は touchstart と touchend にすればいいですね!
タイトル画像のアイコンはこちらから使用しました。
-
前の記事
javascriptとcssでつくるシンプルなフェードイン・フェードアウトのスライダー 2020.05.31
-
次の記事
javascriptで扱う正規表現メモ 2020.06.07