皆さんは、方眼紙の中に自由にカードを配置したい…そう思ったことはありませんか？
今回はCSSのグリッドの枠内に収まるカードというコンセプトで実装を行なってみました。
その時に気がついたtipsをメモで書いていきます。
対象となるClassに一括でJSを当てる
onMouseUpやonMouseDownなど複数の関数を当てなければいけない時は、設定当てる用の関数を用意してそれを配列に入れてそれぞれにイベントが起きた時という条件式を与えることでも動作させることが可能です。
var track = document.getElementsByClassName('memo-content');
この時trackは配列型になるので、それぞれの要素の監視したいイベントに、トリガーとなって動く関数を渡してやればうまく動きます。
Reactなどを用いる際はコンポーネントとしてまとめることで作ることができるので不要です。
event.terget.style
このjsの要素はイベントハンドラーと組み合わせることでイベントの対象となった要素のCSSの値を直接変えることができます。
基本的にはterget.styleを直接変えるより、CSSのクラスとして渡してあげる方が原則良いと言われています。
今回のようなマウスに追従させる・キャンバスを使わずにイラストを描かせるといった用途でない限りは素直にclassを使いましょう。
document.addEventLisner
https://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener
addEventLisnerを使うことにより、渡したイベントが起こっている時関数を呼び出す動作ができるようになっています。今回の場合は、特定のクリックしたターゲットを対象にしたかったため、removeEventLisnerも併用してクリックしている間だけ明示的にEventLisnerが動くようにしています。
キャンバスのお絵かきアプリといったユースケースの場合にはremoveが不要な場合もあります。
CSS positionとgrid
position:absolute の時、グリッドではなくleft topの方の位置スタイルが採用されます。
一方でposition:absolute である時は親要素のgridに引っ張られgridの子要素として振る舞うため、topやleftが無視されgrid-colomn-startの値がスタイルの位置に適用されます。このようにpositionの値で一の計算ロジックを変えることで特定の場所に吸い付く実装を簡単に作ることができます。