如何使用 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 将组件列表中的项目拖动到另一个组件中的列表?的主要内容,如果未能解决你的问题,请参考以下文章

Vue-draggable-next:增加空列表的检测范围

VueJS + Vue.Draggable + Vuex Store + 计算变量

Vue.Draggable学习总结

Vue 组件总结 (拖拽组件 Vue-draggable)

如何提高 Vue Draggable 嵌套的精度?

Vue.Draggable