作ってみよう、なぞれるUI ドラッグやタッチで操作するUI SVGの機能を利用した、マウスやタッチなどで操作できる「なぞれるUI」を解説します。なぞれる仕組みがわかれば、仕組みの応用次第でいろいろなことができます。 カテゴリーHTML/CSS > SVG JavaScript > JavaScriptの実践 2023年8月31日 発行 著者 小山田 晃浩 フロントエンド・エンジニア 作ってみよう、なぞれるUI シリーズの記事一覧 このシリーズの記事 目次 はじめに なぞれるUIの考え方 実装ステップ 1：「なぞり」のコースの用意 実装ステップ 2：ユーザー操作に応じたDOM操作 実装ステップ 3：破線の間隔と開始位置の調整 実装ステップ 4：点の集まりの作成 実装ステップ 5：ドラッグの開始点 実装ステップ 6：ドラッグ中の判定 実装ステップ 7：ドラッグ終了処理 まとめ この記事を読むには 購読の手続きが必要です 購読の手続きへ 購読済みの方はログイン 月額880円（税込） + 初めてお申し込みの方には、30日間無料でお使いいただけます
