sugulogの日記

JavaScriptの位置座標。ページ上の文字をカーソルに合わせて自由に動かそう。

スポンサードリンク

f:id:sugulog:20210504180537p:plain

こんにちは、すぐるです!

sugulogをお読みいただきありがとうございます!!

このブログは、「 過去の無知な自分に向けてわかりやすく説明するなら?? 」を基準に書いています。

少しでもお役に立てれば幸いです。

 

今回は、ページ上の文字をカーソルに合わせて自由に動かそうということで

について簡単に解説します!!

その為このブログを読むことで、Eventオブジェクトと座標についての理解が深まるのはもちろん、ページ上でカーソルに合わせて自由に文字を動かすことができます。

是非最後までご愛読ください。

 

今回は、

  • ページ上の文字をカーソルの合わせて自由に動かそう

の順で解説していきます。

では早速、みていきましょう!!

・ページ上の文字をカーソルに合わせて自由に動かそう

まずHTMLで動かしたい文字を定義しましょう。

f:id:sugulog:20210504171323p:plain

 そしてJavaScriptの記述です。

f:id:sugulog:20210504171828p:plain

動かしたい要素を取得後、今回はdocumentに対しaddEventListenerを使用します。

documentオブジェクトはブラウザに読み込まれたWebページを表します。

そのため表示されるWebページ全体に対しイベントを監視することができます。

そしてmousedownのイベントリスナーの中でmousemoveイベントを監視することで、「クリックしたまま動かした時」という条件をイベント監視で定義することができます。

また上記の条件を満たした時に関数mouseMoveが実行されます。

関数mouseMoveでは動かしたい要素に対しstyleを使用し、margin-leftにはEventオブジェクトのclientXを使用しX座標を適用させ、margin-topにはclientYを使いY座標を適用させています。

その結果、クリックしたまま動かした時の位置座標を常に取得し、動かしたい要素のmarginプロパティに適用させ後を追わせています。

最後にmouseupした際にはremoveEventListenerを使用し、位置座標の取得を終了させています。

f:id:sugulog:20210504175117g:plain

クリックしたまま動かした時にカーソルに合わせて文字も動いているのが確認できます。

また文字が動いてない時はクリックを離した状態でカーソルを動かしている時です。

 

以上、今回のブログでした。

Eventオブジェクトと座標についての理解が深まり、ページ上でカーソルに合わせて自由に文字を動かすことができましたか??

文字以外にも画像やアイコンなどにも応用できそうですね。

今回のToDo

ページ上の文字をクリックしたまま動かした時にカーソルに合わせて動く実装をしてみましょう(≧∀≦)/

 

最後に!!

今後も、「 過去の無知な自分に向けてわかりやすく説明するなら?? 」を基準にブログを書いていきます。

少しでも気になった方はお試しでもいいので1度読者登録お願いします!

最後までご愛読いただきありがとうございました!!