Vue.js Vue.Draggableを利用してドラッグ&ドロップを実装するサンプルコード

Vue.js Vue.Draggableを利用してドラッグ&ドロップを実装するサンプルコード

ドラッグ&ドロップをお手軽に実装できるvue.jsコンポートネントライブラリ「 Vue.Draggable( SortableJS のvue版 )」を利用したサンプルコードです。

環境

  • OS  ubuntu19.10
  • node v12.13.0
  • npm 6.12.1
  • vuedraggable 2.23.2

Vue.js環境構築

今回、構築した手順です。

Vue.Draggableのインストール

vue.draggableをインストールします。

これで vue.draggable が利用できます。

サンプルコード

vue.draggable を利用したサンプルコードとなります。

src配下のApp.vueを下記のように編集します。

起動します。

ブラウザから http://プライベートIP:8080 にアクセスすると下図の画面が表示され、ドラック&ドロップが可能になります。

複数箇所からドラック&ドロップ させる場合は、下記のコードとなります。

ブラウザから http://プライベートIP:8008 にアクセスすると下図のようになります。