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">