Drag & Drop von Tree-Komponente zu DataTable

Question

Ich möchte Drag & Drop von Tree-Komponente zu DataTable verwenden. Wie kann ich das machen? Ich benutze PrimeNG, aber etwas stimmt nicht. Ich habe nach Kompilationen keinen Fehler, aber meine Daten ziehen nicht. Was ist los mit dir?

Mein Code:

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

Versuchen Sie, draggableNodes = "true" hinzuzufügen & droppableNodes = "true".

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