drag-and-drop - Vuetify TreeView + 拖放

Question

我正在尝试在 Vuetify Treeview 和数据表上实现拖放。它似乎不受完全支持，但在 this thread 中描述了解决方法.然而，解决方法并不完整。如果有人在此基础上创建代码笔或类似工具，社区可能会受益？

让我感到困惑的是，组件 DragDropSlot.vue 已创建，但代码中使用了“drag-drop-slot”。还有一个“_.cloneDeep(this.tree)”调用，其中 _ 未定义。我认为它应该被某些东西取代。当我评论说拖放仍然不起作用时。可能错过了更像是定义数据的东西。不确定正确的数据类型。它似乎是基于我没有使用过的 react 。刚开始学习vue和vuetify。

我愿意听取有关如何解决此问题的任何建议。

一切顺利

Answer 1

我将 V-Treeview 与 Vue.Draggable ( https://github.com/SortableJS/Vue.Draggable ) 结合使用。 我使用直接链接。

<script src="//cdn.jsdelivr.net/npm/sortablejs@1.8.4/Sortable.min.js"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.20.0 vuedraggable.umd.min.js"/>
<v-treeview
:active.sync="active"
:items="users"
:search="search"
item-key="Id"
item-text="UserName"
item-children="Children"
:open.sync="open"
activatable
color="warning"
dense
transition
return-object
>
<template v-slot:label="{ item }">
<draggable :list="users" group="node" :id="item.Id" :data-parent="item.ParentId" @start="checkStart" @end="checkEnd"    >
    <label>
        <i class="fas fa-user mr-3" />
        <span id="item.id" >{{item.UserName}}</span>
    </label>  
</draggable>

我还向项目树模型添加了 ParentId 属性: { 编号:1， 用户名:“John Doe”， ParentId: null, children :[{Id:2, ParentId: 1,...}]
然后我使用开始和结束事件，我从中搜索父开始节点我拖动项目和我放下项目的父结束节点。当 parent 为 null 时，该项目是根。

new Vue({
        el: '#app',
        vuetify: new Vuetify(),
        components: {
            vuedraggable
        },
        data() {
            return {
                active: [],
                open: [],
                users: [],
                selectedItems: [],
            }
        },
        mounted: function () {
            this.fetchUsers();
        },
        methods: {
            findTreeItem: function (items, id) {
                if (!items) {
                    return;
                }
                for (var i = 0; i < items.length; i++) {
                    var item = items[i];
                    // Test current object
                    if (item.Id === id) {
                        return item;
                    }
                    // Test children recursively
                    const child = this.findTreeItem(item.Children, id);
                    if (child) {
                        return child;
                    }
                }
            },
            checkStart: function (evt) {
                var self = this;
                self.active = [];
                self.active.push(self.findTreeItem(self.users, evt.from.id))
            },
            checkEnd: function (evt) {
                var self = this;
                var itemSelected = self.active[0];
                var fromParent = itemSelected.ParentId ? self.findTreeItem(self.users, itemSelected.ParentId) : null;
                var toParent = self.findTreeItem(self.users, evt.to.id);
                var objFrom = fromParent ? fromParent.Children : self.users;
                objFrom.splice(objFrom.indexOf(itemSelected), 1);

                if (toParent.Id === itemSelected.Id) {
                    itemSelected.ParentId = null;
                    self.users.push(itemSelected);
                }
                else {
                    itemSelected.ParentId = toParent.Id;
                    toParent.Children.push(itemSelected);
                }
                self.saveUser(itemSelected);
                //   self.active = [];
                return false;
            },
            fetchUsers: function () {
                //load from api
            },
            saveUser: function (user) {
                //save 
            },

        },
        computed: {
            selected() {
                if (!this.active.length) return undefined
                return this.active[0];
            },
        }
    })

希望对你有所帮助。 工程博士。