如何使用 Vue draggable 将组件列表中的项目拖动到另一个组件中的列表?
Posted
技术标签:
【中文标题】如何使用 Vue draggable 将组件列表中的项目拖动到另一个组件中的列表?【英文标题】:How can I drag items from list in component to list inside another component using Vue draggable? 【发布时间】:2021-02-22 12:07:46 【问题描述】:我正在尝试使用 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>
这是 List 组件:
<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>
【问题讨论】:
【参考方案1】:将:options='group: "items"'
添加到您的可拖动组件,或者您可以尝试添加属性group="items"
(如果您使用的是Vue 2.2+)
【讨论】:
以上是关于如何使用 Vue draggable 将组件列表中的项目拖动到另一个组件中的列表?的主要内容,如果未能解决你的问题,请参考以下文章