![見出し画像](https://assets.st-note.com/production/uploads/images/145037956/rectangle_large_type_2_8c02cc1fa3794ab6e9d73db3899fab4a.png?width=1200)
Vue3のドラッグ・アンド・ドロップはvue-draggable-plusを使おう
vue-draggable-plusとは?
Sortable.jsベースのVue3用のドラッグ・アンド・ドロップ用のライブラリです.
カンバンボードのようなUI作るときに役立ちます
vue.draggable vs vue-draggable-plus
Vue用のドラッグ・アンド・ドロップ(D&D)ライブラリといえば vue.draggable (vue3ではvue.draggable.next) です.「vue drag and drop」でググると一番最初に出てきますし,Vue Schoolにも取り上げられてます(How Do I Drag and Drop in Vue?).
しかし,長らく更新されてなかったり,vue3.2.32以降ではうまく動かなかったりといろいろ問題がありました.
かくいう弊社でもvue2時代に vue.draggable を使用しており,vue3移行時に vue.draggable.next に移行しました.当時は他に選択肢がなく,仕方なくvueのバージョンを3.2.31に固定して1年ほどやり過ごしたのですが,vue3.4もリリースされ,流石にvueの最新バージョンを使いたいとのことからvue-draggable-plus に移行しました.
vue-draggable-plus のほうが composable関数で使えたりと 機能は豊富ですが,基本的なAPIは vue.draggable.next とほぼ同じで,移行はそれほど大変ではなかったです.
この記事が気に入ったらサポートをしてみませんか?