如何使用Vue draggable将项目从组件中的列表拖动到另一个组件内的列表

Question

我正试图使用vue draggable将项目从一个列表移动到另一个列表，但这些列表位于组件内部，我无法使其工作。项目可以在列表中移动，但不能从一个列表移动到另一个列表。

我有一个包含所有列表的Board组件和一个包含可拖动项目的List组件。

这是板组件：

<template>
<div class="board">
<BoardMenu :users="this.users" :name="this.name"> </BoardMenu>
<div class="boardContent">
<Backlog></Backlog>
<div class="lists">
<List
class="list"
v-for="list in lists"
:key="list.id"
:id="list.id"
:items="list.items"

></List>
</div>
</div>
</div>
</template>
<script>
import BoardMenu from "./BoardMenu";
import Backlog from "./Backlog";
import List from "./List";
export default {
name: "UserIcon",
props: {
id: Number
},
components: {
BoardMenu,
Backlog,
List
},
data() {
return {
name: "BOARDNAME",
users: [{ name: "Bram Coenders" }, { name: "Jasper van der Zwaan" }],
lists: [
{
id: 1,
items: [
{
type: "story",
id: 1,
listId: 1
},
{
id: 2,
listId: 1
},
]
},
{ id: 2, items: [] }
],
backlog: { id: 2 }
};
},
};
</script>

这是列表组件：

<template>
<div class="list">
<div class="list-header">
<h2 id="list-name">{{ name }}</h2>
<p id="list-description">{{ description }}</p>
</div>
<draggable
v-model="items"
:list="this.id"
class="list-list"
>
<div :id="item.id" class="list-item" v-for="item in items" :key="item.id">
<div v-if="item.type == 'story'">
<Story class="story" :id="item.id"></Story>
</div>
<div v-else>
<Task class="task" :id="item.id"></Task>
</div>
</div>
</draggable>
</div>
</template>
<script>
import draggable from "vuedraggable";
import Story from "./Story.vue";
import Task from "./Task.vue";
export default {
name: "List",
components: {
Story,
Task,
draggable
},
props: {
items: []
},
data() {
return {
name: "To do",
description: "this sprint."
};
},
methods :{
newItem: function(){
console.log("test")
}
}
};
</script>

Answer 1

将:options='{group: "items"}'添加到可拖动组件中，或者您可以尝试添加属性group="items"(如果您使用的是Vue 2.2+(