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>
