ライブラリを利用することなく短時間でシンプルなコードを利用してドラッグ&ドロップでテーブル行の並び替えをしたいと思ったことはないですか?本文書ではVue.jsのCompositions API環境でドラッグ&ドロップを利用してテーブル行の並び替えを行う方法を説明しています。実装にはdragstart, dragend, dragover, dragenterイベントを利用しているのでVue.jsでのdragイベントに馴染みがない人のdragイベントの学習にも利用することができます。 動作確認はmacOSを利用、Vue.jsのバージョンは3.2です。 プロジェクトの作成 npm init vue@latestコマンドを利用してVue.jsのプロジェクトを作成します。コマンド実行後はプロジェクト名の設定とプロジェクトで利用する機能の選択を行います。本文書ではどの機能も選択せずプロジェクトの作成