从 Tree 组件拖放到 DataTable

Question

我想使用从 Tree 组件拖放到 DataTable 的方法。我该怎么做？我使用 PrimeNG，但出了点问题。编译后我没有错误，但我的数据没有拖拽。怎么了？

我的代码：

drag.and.drop.ts

import { Component, OnInit } from '@angular/core';
import {Tree} from 'primeng/primeng';
import {DataTable} from 'primeng/primeng';
import {Column} from 'primeng/primeng';
import {Draggable,Droppable} from 'primeng/primeng';
import {ObjectsService} from "../app.tree/objects.service";
import {ClassObject} from "./class.object";

@Component({
selector: 'drag-drop',
template: `
    <p-growl [value]="msgs"></p-growl>
    <div class="row">
        <div class="col-md-6 col-xs-12" style="height: 600px">
            <div class="panel">
                <div class="panel-heading">
                    <label class="col-md-offset-5 col-xs-offset-5">Все объекты</label>
                </div>
                <div class="panel-body">
                     <p-tree [value]="availableObjects" [style]="{'width':'470px','height':'530px'}"
                      selectionMode="single" [(selection)]="selectedFile" (onNodeSelect)="nodeSelect($event)"
                     pDraggable="classObjs" (onDragStart)="dragStart($event)" (onDragEnd)="dragEnd($event)"></p-tree>
                     Selected Node: {{selectedFile ? selectedFile.label : 'none'}}
                </div>
            </div>
        </div>
        <div class="col-md-6 col-xs-12" style="height: 600px;">
            <div class="panel">
                <div class="panel-heading">
                    <label class="col-md-offset-2 col-xs-offset-5">Объекты, которые относятся к классу</label>
                </div>
                <div class="panel-body" pDroppable="classObjs" (onDrop)="drop($event)"
                       [ngClass]="{'ui-state-highlight':draggedObject}">
                    <p-dataTable [value]="selectedObject">
                        <p-column field="name" header="Наименование"></p-column>
                        <p-column field="dBegin" header="Дата начала"></p-column>
                        <p-column field="dEnd" header="Дата окончания"></p-column>
                    </p-dataTable>
                    <div class="row" style="position: absolute; bottom: 0px;">
                        <p class="col-lg-1" style="height: 30px; width: 5px; border: 1px solid #000; background: #90E803"></p>
                        <label class="col-lg-7" style="font-size: 12px;"> - новые записи</label>
                        <a title="Корзина" type="button" class="col-lg-3 btn btn-lg" style="color: #000; float: right;">
                            <span class="glyphicon glyphicon-trash"></span></a>
                    </div>
                </div>
            </div>
        </div>
    </div>    
`,
directives: [Tree, DataTable, Column, Draggable, Droppable]
})
export class DragAndDrop implements OnInit {

availableObjects: ClassObject[];

selectedObjects: ClassObject[];

draggedObject: ClassObject;

constructor(private objectService: ObjectsService){}

ngOnInit() {
    this.selectedObjects = [];
    this.availableObjects = this.objectService.getObjects();
}

dragStart(event, classObj: ClassObject){
    this.draggedObject = event.node;
}

drop(event) {
    if(this.draggedObject) {
        this.selectedObjects.push(this.draggedObject);
        this.availableObjects.splice(this.findIndex(this.draggedObject), 1);
        this.draggedObject = null;
    }
}

dragEnd(event) {
    this.draggedObject = null;
}

findIndex(event) {
    let index = -1;
    for(let i = 0; i < this.availableObjects.length; i++) {
        if(event.node.label === this.availableObjects[i].label) {
            index = i;
            break;
        }
    }
    return index;
}
nodeSelect(event) {
    console.log(event.node);
}
}

object.service.ts

import { Injectable } from '@angular/core';
import {ClassObject} from "../app.drag.and.drop/class.object";

@Injectable()
export class ObjectsService {
getObjects():ClassObject[] {
    return [
        {
            "label": "1",
            "data": "Documents Folder",
            "expandedIcon": "fa-folder-open",
            "collapsedIcon": "fa-folder",
            "children": [
                {"label": "2", "icon": "fa-file-o", "data": "Expenses Document"},
                {
                    "label": "3",
                    "data": "Documents Folder",
                    "expandedIcon": "fa-folder-open",
                    "collapsedIcon": "fa-folder",
                    "children":[
                        {"label": "4", "icon": "fa-file-o", "data": "Expenses Document"},
                        {"label": "5", "icon": "fa-file-o", "data": "Expenses Document"},
                    ]
                },
            ]
        }
    ]
}
}

class.object.ts

import {TreeNode} from "primeng/primeng";

export interface ClassObject {
label?: string;
icon?: any;
expandedIcon?: any;
collapsedIcon?: any;
children?: TreeNode[];
leaf?: boolean;
data: any;
}

Answer 1

尝试添加 draggableNodes="true" & droppableNodes="true".

<p-tree [value]="files" 
                    selectionMode="multiple" 
                    [(selection)]="selectedFiles" 
                    (onNodeSelect)="nodeSelect($event)"
                    draggableNodes="true"
                    droppableNodes="true"
                    [contextMenu]="cm">

从 Tree 组件拖放到 DataTable

Drag and Drop from Tree component to DataTable

typescript

angular

primeng