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

作成日 2019.12.03
更新日 2022.06.29
Vue.js
Vue.Draggable, Vue.js

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

1. 環境
2. Vue.js環境構築
3. Vue.Draggableのインストール
4. サンプルコード

環境

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

Vue.js環境構築

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

## test-projectという名前で作成
npx vue create test-project
cd test-project

Vue.Draggableのインストール

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

 npm i -S vuedraggable

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

サンプルコード

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

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

<template>
  <div id="app">
    <draggable v-model="list" element="ul" :options="{animation:500}">
      <li v-for="item in list" :key="item.id">{{ item.name }}</li>
    </draggable>
  </div>
</template>

<script>
import draggable from "vuedraggable";
export default {
  components: {
    draggable
  },
  data() {
    return {
      list: [
        { id: 1, name: "java" },
        { id: 2, name: "c#" },
        { id: 3, name: "go" },
        { id: 4, name: "c++" },
        { id: 5, name: "vba" },
        { id: 6, name: "electron" },
        { id: 7, name: "vue.js" },
      ]
    };
  }
};
</script>

<style>
#app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;    
    color: #2c3e50;
    margin-top: 120px;
    width: 300px;
    margin:  0 auto;
} 
ul {
  padding: 0;
  position: relative;
}
li {
  color: black;
  border-left: solid 8px #37b507;
  background: whitesmoke;
  margin-bottom: 5px;
  line-height: 1.5;
  border-radius: 0 15px 15px 0;
  padding: 0.5em;
  list-style-type: none!important;
}
</style>

起動します。

yarn serve

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

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

<template>
  <div id="app">
    <div class="box">
      <draggable v-model="list" element="ul" :options="{group:'ITEMS',animation:500}">
        <li v-for="item in list" :key="item.id">{{ item.name }}</li>
      </draggable>
    </div>
    <div class="box">
      <draggable v-model="list2" element="ul" :options="{group:'ITEMS',animation:500}">
        <li v-for="item in list2" :key="item.id">{{ item.name }}</li>
      </draggable>
    </div>
  </div>
</template>

<script>
import draggable from "vuedraggable";
export default {
  components: {
    draggable
  },
  data() {
    return {
      list: [
        { id: 1, name: "java" },
        { id: 2, name: "c#" },
        { id: 3, name: "go" },
        { id: 4, name: "c++" },
        { id: 5, name: "vba" },
        { id: 6, name: "electron" },
        { id: 7, name: "vue.js" },
      ],
      list2: [
        { id: 1, name: "windows" },
        { id: 2, name: "centos" },
        { id: 3, name: "ubuntu" },
        { id: 4, name: "mac" },
        { id: 5, name: "freebsd" }        
      ]
    };
  }
};
</script>

<style>
#app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;    
    color: #2c3e50;
    margin-top: 120px;
    width: 500px;
    margin:  0 auto;
}
.box {
  width: 50%;
  float: left;
  padding: 20px 0;
}
ul {
  padding: 0;
  position: relative;
}
li {
  color: black;
  border-left: solid 8px #37b507;
  background: whitesmoke;
  margin-bottom: 5px;
  line-height: 1.5;
  border-radius: 0 15px 15px 0;
  padding: 0.5em;
  list-style-type: none!important;
}
</style>

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