ナビ・リスト操作
ドラッグ並べ替え
ハンドルをつまんで縦リストの順序を入れ替える。掴んだ項目に合わせて他の項目がスッと動いて場所を空ける（並べ替えの定番）。PC・スマホ両対応。
プレビュー
ドラッグ
操作ドラッグ／スワイプで操作できます（PC・スマホ対応）。
実装メモ
ハンドルの Pointer Events でドラッグを検知し、掴んだ項目は指に追従（transform で移動・transition なし）、間の項目は行の高さ分だけ translateY でずらして「隙間を空ける」ことで並べ替えを表現します。他項目には transition を効かせるのでスッと動きます。離すと実際のDOM順を組み替えて番号を振り直します。ハンドルに touch-action:none を付け、縦ドラッグがスクロールと衝突しないようにしています（均等な行高さが前提）。
コード（コピーして使えます）
<ul class="dr-list" id="dr-list">
<li class="dr-item"><span class="dr-handle" aria-label="ドラッグして移動">⠿</span><span class="dr-rank"></span>牛乳を買う</li>
<li class="dr-item"><span class="dr-handle" aria-label="ドラッグして移動">⠿</span><span class="dr-rank"></span>資料をまとめる</li>
<li class="dr-item"><span class="dr-handle" aria-label="ドラッグして移動">⠿</span><span class="dr-rank"></span>ジムに行く</li>
<li class="dr-item"><span class="dr-handle" aria-label="ドラッグして移動">⠿</span><span class="dr-rank"></span>本を返却する</li>
<li class="dr-item"><span class="dr-handle" aria-label="ドラッグして移動">⠿</span><span class="dr-rank"></span>友人に返信</li>
</ul>