一定の時間押し続けたときだけ実行するボタンを、ライブラリを使わずに React で作りました。押し始めにタイマーを始め、離したとき、ボタンの外へずらしたとき、スクロールで取り消されたときに止めます。キーボードの自動リピートで何度も実行 ...

表計算ソフトのように、表のセルをドラッグして四角い範囲で選ぶ仕組みを、ライブラリを使わずに React で作りました。範囲は起点と端の2つのセルで持ちます。Shift と矢印キーでの選択、Ctrl+C でのタブ区切りのコピー、文字の選 ...

16×16 のマス目をクリックやドラッグで塗るドット絵エディターを React と TypeScript で作りました。ポインターの位置からマスを求める方法、速く動かしても線が途切れない塗り方、塗りつぶし、元に戻す機能、PNG での保 ...

ラベルを左右にドラッグすると数値が増減する入力欄を、React と Pointer Events で作りました。setPointerCapture でラベルの外まで追いかける方法、Shift で10倍にする方法、0.01 刻みの丸め、 ...

横に並んだカードをマウスでつかんで動かせるリストを、ライブラリなしの React で作りました。ポインターは動き始めてから捕まえます。ドラッグの後にリンクが開く問題や、リンクのドラッグで止まる問題も確かめました。

項目からさらにメニューが開く、入れ子のドロップダウンメニューを React で作りました。開いている枝を id の配列1つで持ち、同じ描画関数を再帰で呼びます。斜めにポインターを動かしたときの誤作動の防ぎ方と、矢印キーでの操作も確かめ ...

表の見出しの右端の取っ手をドラッグして、列の幅を変えられるようにしました。幅を state に持って col に渡し、table-layout: fixed と表の幅の指定で、そのとおりに描かせます。ダブルクリックで中身に合わせる方法 ...

マウスや指でつまみを回して音量などの値を変えるダイヤルを、ライブラリを使わずに React で作りました。ポインターの向きを Math.atan2 で求め、前回からの差を足していくと、真下を越えても値が飛びません。キーボードでも操作で ...

何もない所からドラッグして四角い枠を描き、枠にかかった項目をまとめて選ぶ仕組みを、ライブラリを使わずに React で作りました。項目の位置は押したときに一度だけ測ります。Shift での追加、クリックとの区別、文字が選択されてしまう ...

画像をマウスのホイールで拡大・縮小し、ドラッグで動かせる表示枠を、ライブラリを使わずに React で作りました。カーソルの下の位置を動かさずに拡大する計算と、onWheel では preventDefault が効かずページがスクロ ...

リストの行を指やマウスで左へ引くと削除される仕組みを、ライブラリを使わずに React で作りました。少し引いただけなら元に戻し、縦の動きはページのスクロールに任せます。touch-action の値でタッチ操作がどう変わるかも、Ch ...

付せんをつまみのドラッグで好きな位置へ動かす仕組みを、ライブラリを使わずに React で作りました。位置と重なり順は state で持ちます。重なり順を配列の並べ替えで変えると、ドラッグが途中で止まることも確かめました。

加工前と加工後のような2枚の画像を重ね、つまみを左右に動かして見比べる表示を、ライブラリを使わずに React で作りました。ビフォーアフターを1つの枠で見せたいときに使えます。clip-path で隠す理由、キーボードでの操作、po ...

canvas と Pointer Events で、マウスでも指でも書ける署名欄を React で作りました。線を点の配列で持って描き直す作りにし、画面の倍率、幅の変化、枠の外へのはみ出し、スクロールとの取り合い、画像への書き出しを確 ...

画像の上で範囲をドラッグして選び、その部分を PNG に切り抜く仕組みを、ライブラリを使わずに React で作りました。手元の画像をブラウザの中でトリミングする画面に使えます。setPointerCapture と draggabl ...

サイドバーと本文のあいだの取っ手をドラッグして、幅を変えられるようにする部品を React と TypeScript で作りました。setPointerCapture、文字の選択とタッチの対策、キーボード操作、幅の保存を順に確かめてい ...