スワイプ削除リストアイテム
このスワイプ削除リストは、項目を指で左へ滑らせると裏から赤い「削除」が現れ、そのまま消去できるモバイル向けの操作です。JavaScript は touchstart で開始位置を記録し、 touchmove で指の移動量を計算してテキスト部分を左へ translateX でずらします。
解説
このスワイプ削除リストは、項目を指で左へ滑らせると裏から赤い「削除」が現れ、そのまま消去できるモバイル向けの操作です。JavaScript は touchstart で開始位置を記録し、touchmove で指の移動量を計算してテキスト部分を左へ translateX でずらします。移動は最大 72 ピクセル（削除ボタンの幅）までに制限しています。touchend で一定量を超えていれば項目を削除し、足りなければ元の位置へ戻します。
使う場面
- To-Do アプリやメッセージ一覧など、不要な項目を手早く消したいとき
- スマートフォン中心の管理画面で、ネイティブアプリ風の操作感を出したいとき
- 削除ボタンを常時表示せず、必要なときだけ現したいとき
確定に必要な移動量や削除幅は数値を変えるだけで調整できます。注意点として、このコードはタッチイベントを使うため、マウスのみのパソコンでは反応しません。デスクトップにも対応させたい場合は、pointer 系イベントに置き換えると指とマウスの両方を扱えます。削除前に確認を挟みたい場合は、消去処理の前に取り消し用の一手間を加えると安全です。
よくある質問
パソコンのマウスでも動きますか？
このコードはタッチ操作を前提にしているため、マウスだけのパソコンでは動きません。デスクトップにも対応させたい場合は、ポインタ系のイベントに置き換えると、タッチとマウスの両方で同じように滑らせられます。
削除を確定する移動量は調整できますか？
できます。指を離したときに削除と判定する移動量のしきい値や、滑らせられる最大幅の数値を変えるだけで、軽く動かすだけで消えるか、しっかり滑らせないと消えないかを調整できます。