Vue.Draggableを利用してv-listを動的に並び替える

はじめに

要素をドラッグ＆ドロップで並び替えしたいときって、割と頻繁にあるのではないかと思います。そういったときに便利なのが、Vue.Draggableです。こちらを利用すると、パソコンとスマホ、いずれの場合でも利用可能な並び替えが簡単に実装できます。

実装

必要なパッケージは以下の通りです。

yarn add vuedraggable

上記をインポートして、templateで呼び出します。

並び替えを行うと、v-modelで関連付けた値が並び替えられます。上記のケースでは、this.contentsの値がリアルタイムで並び替えられます。これが非常に便利でございます。