Vue3 Vue.Draggableの使い方 


Vue3 Vue.Draggable 使用方法

- リポジトリ

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

https://github.com/SortableJS/vue.draggable.next




- 環境

```
ubuntu20.04
```

- 使い方

https://shiro-changelife.com/vue3-vuedraggable-next/


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

```
npm i -S vuedraggable@next
```

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

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

```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>

```

実行結果

![Peek 2023-02-10 08-44.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/589906/f20a263f-a986-5640-0421-b9a1e788a64e.gif)

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

参考: 

https://www.kabanoki.net/9532/

```vue: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>

```

結果

![Peek 2023-02-10 12-20.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/589906/97a8b654-4b0c-8549-1731-0ae043ed68fe.gif)

- listを追加する

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

https://www.kabanoki.net/3591/

```vue: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>
```

結果

![Peek 2023-02-10 13-08.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/589906/af284768-e08c-df60-9f1e-c0f7dba512e6.gif)


- 削除

参考

https://github.com/SortableJS/vue.draggable.next/blob/master/example/components/handle.vue

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

したこと

- 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
```

結果

![Peek 2023-02-11 09-38.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/589906/1cfd1aef-7476-e877-f04c-5fc3646c1ac3.gif)

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

```vue
<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>
```



![Peek 2023-02-11 09-49.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/589906/936d165f-acb6-9fdf-9b76-7a7514dd52a6.gif)