Vue3 Vue.Draggable 使用方法

リポジトリ

ここのサンプルとかもとても参考になる

環境

ubuntu20.04

使い方

まずnpmを使用してプロジェクト内でライブラリをインストール

npm i -S vuedraggable@next

(※その他yarn CDNを用いたインストール方法があるみたい)

インストールできたら，draggableのサンプルコードをApp.vueに貼り付けて実行します．

App.vue

<template>
    <div class="hello">
        <draggable v-model="data" group="people" item-key="id" handle=".handle">
            <template #item="{element}">
                <div class="drag-item">
                    <span class="handle">ここを押せば動かせます。</span>
                    {{ element.id }}
                </div>
            </template>
        </draggable>
    </div>
</template>

<script>
import draggable from "vuedraggable";

export default {
    components: {
        draggable,
    },
    data() {
        return {
            data: [
                {
                    id: 1,
                    content: "テスト1",
                },
                {
                    id: 2,
                    content: "テスト2",
                },
                {
                    id: 3,
                    content: "テスト3",
                },
            ],
        };
    },
};
</script>

<style scoped>
.drag-item {
    background: rgb(233, 249, 255);
    margin: 10px 0;
}
</style>

実行結果

シンプル(カーソルにポインターを指定していて文字選択にならない)

参考:

App.vue

<template>
    <div class="hello">
        <draggable v-model="data" group="people" item-key="id" tag="ul">
            <template #item="{element}">
              <div>
                <li>{{element.id}}</li>
              </div>
            </template>
        </draggable>
    </div>
</template>

<script>
import draggable from "vuedraggable";

export default {
    components: {
        draggable,
    },
    data() {
        return {
            data: [
                {
                    id: 1,
                    content: "テスト1",
                },
                {
                    id: 2,
                    content: "テスト2",
                },
                {
                    id: 3,
                    content: "テスト3",
                },
            ],
        };
    },
};
</script>

<style scoped>
ul {
  list-style-type: none;
}
li {
  cursor: pointer;
  padding: 10px;
  border: solid #ddd 1px;
}
</style>

結果

listを追加する

参考: (vue2でのプログラムだけど,methodでアイテムの追加する部分等参考にしました)

App.vue

<template>
    <button v-on:click="log">追加</button>
    <div class="hello">
        <draggable v-model="data" group="people" item-key="id" tag="ul">
            <template #item="{element}">
              <div>
                <li>{{element.id}}</li>
              </div>
            </template>
        </draggable>
    </div>
</template>

<script>
import draggable from "vuedraggable";

export default {
    components: {
        draggable,
    },
    data() {
        return {
            data: [
                {
                    id: 1,
                    content: "テスト1",
                },
                {
                    id: 2,
                    content: "テスト2",
                },
                {
                    id: 3,
                    content: "テスト3",
                },
            ],
        };
    },
    methods: {
      log() {
        console.log("test")
        this.data.push(
          {
              id: 3,
              content: "テスト3",
          }
        );
      },
    },
    
};
</script>

<style scoped>
ul {
  list-style-type: none;
}
li {
  cursor: pointer;
  padding: 10px;
  border: solid #ddd 1px;
}
</style>

結果

削除

参考

以下のようなプログラムで削除もできるようになった!

したこと

draggable内のtemplateの#Itemにindexを追加
deleteボタンを作って先程のindexを引数にする
methodsにdataを削除する関数を追加

App.vue

<template>
    <button v-on:click="add">追加</button>
    <div class="hello">
        <draggable v-model="data" group="people" item-key="id" tag="ul">
            <template #item="{element, index}">
              <div>
                <li>{{element.id}}
                  <span class="del" v-on:click="del(index)">[削除]</span>
                </li>
              </div>
            </template>
        </draggable>
    </div>
</template>

<script>
import draggable from "vuedraggable";

export default {
    components: {
        draggable,
    },
    data() {
        return {
            data: [
                {
                    id: 1,
                    content: "テスト1",
                },
                {
                    id: 2,
                    content: "テスト2",
                },
                {
                    id: 3,
                    content: "テスト3",
                },
            ],
        };
    },
    methods: {
      add() {
        console.log("test")
        this.data.push(
          {
                    id: 3,
                    content: "テスト3",

          }
        );
      },
      del(index) {
        console.log("test")
        this.data.splice(index, 1);

      },

    },
    
};
</script>

<style scoped>
ul {
  list-style-type: none;
}
li {
  cursor: pointer;
  padding: 10px;
  border: solid #ddd 1px;
}
</style>
dev@Thin

結果

list内に追加ボタンを入れる

<template>
    <button v-on:click="add_last()">追加</button>
    <div class="hello">
        <draggable v-model="data" group="people" item-key="id" tag="ul">
            <template #item="{element, index}">
              <div>
                <li>{{element.id}}
                  <span class="del" v-on:click="del(index)">[削除]</span>
                  <span class="add" v-on:click="add(index)">[追加]</span>
                </li>
              </div>
            </template>
        </draggable>
    </div>
</template>

<script>
import draggable from "vuedraggable";

export default {
    components: {
        draggable,
    },
    data() {
        return {
            data: [
                {
                    id: 1,
                    content: "テスト1",
                },
                {
                    id: 2,
                    content: "テスト2",
                },
                {
                    id: 3,
                    content: "テスト3",
                },
            ],
        };
    },
    methods: {

      add_last() {
        console.log("test")
        this.data.push( 
          {
              id: 3,
              content: "テスト3",
          }
        );
      },
      add(index) {
        console.log("test")
        this.data.splice(index+1, 0, 
          {
              id: 3,
              content: "テスト3",
          }
        );
      },
      del(index) {
        console.log("test")
        this.data.splice(index, 1);
      },

    },
    
};
</script>

<style scoped>
ul {
  list-style-type: none;
}
li {
  cursor: pointer;
  padding: 10px;
  border: solid #ddd 1px;
}
</style>