如何使面板栏可倾斜拖动

Question

所以我是Angular的新手，我正在为Angular尝试剑道的一些组件。我正在尝试使剑道面板栏可拖动，以便我可以将其放入文本框中。我不知道该怎么做。cdkdrag和-drops都位于不同的组件中。有谁知道这是否可能以及我应该怎么做？

这是我的面板栏的代码

panelwrapper.component.css 和 panelwrapper.component.html

.panelbar-wrapper {
width: 300px;
font-size: 18px;
height: 43px;
color: black;
}

<div class="panelbar-wrapper">
<kendo-panelbar class="panelbar">
<kendo-panelbar-item class="panelbar-een" [title]="'Bestanden'">
<kendo-panelbar-item class="panelbar-twee" [title]="'Opslaan'" icon="save"></kendo-panelbar-item>
<kendo-panelbar-item class="panelbar-drie" [title]="'Open'" icon="folder-open"></kendo-panelbar-item>
<kendo-panelbar-item class="panelbar-vier" [title]="'Import Formulier'" icon="download">
</kendo-panelbar-item>
<kendo-panelbar-item class="panelbar-vijf" [title]="'Export Formulier'" icon="bac"></kendo-panelbar-item>
<kendo-panelbar-item class="panelbar-zes" [title]="'Nieuw Formulier'" icon="file-add"></kendo-panelbar-item>
</kendo-panelbar-item>
</kendo-panelbar>
</div>

这是它应该结束的文本框

formadd.component.css 和 formadd.component.html

.add{
background-color: rgb(247, 245, 245);
display: flex;
max-width: 1365px;
min-width: 1109px;
border-bottom: 5px solid rgb(255, 106, 106);
padding: 20px;
margin: 10px;
}
.drag {
width: 1117px;;
height: 200px;
border: solid 1px #ccc;
color: rgba(0, 0, 0, 0.87);
cursor: move;
display: inline-flex;
justify-content: center;
align-items: center;
text-align: center;
background: #fff;
border-radius: 4px;
margin-right: 25px;
position: relative;
z-index: 1;
transition: box-shadow 200ms cubic-bezier(0, 0, 0.2, 1);
box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
0 2px 2px 0 rgba(0, 0, 0, 0.14),
0 1px 5px 0 rgba(0, 0, 0, 0.12);
}

.drag:active {
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
0 8px 10px 1px rgba(0, 0, 0, 0.14),
0 3px 14px 2px rgba(0, 0, 0, 0.12);
}
.element{
margin: 4%;
display: flex;
position: absolute;
transition: .5s ease;
top: -3.5%;
height: 60%;
left: 0%;
} 
.voeg-element {
padding: 6%;
font-weight: bold;
width: 1020px;
text-align: center;
}
.verwijder{
margin: -12%;
display: flex;
position: absolute;
transition: .5s ease;
top: 152.5%;
left: 86%;
height: 27px;
}
.opslaan{
margin: -12%;
display: flex;
position: absolute;
transition: .5s ease;
top: 152.5%;
left: 97%;
height: 27px;
}
.title{
margin: -8%;
display: flex;
position: absolute;
transition: .5s ease;
top: 259.5%;
height: 43%;
left: 50%;
font-size: smaller;
} 
.pagina{
font-size: medium;
font-weight: 500;
}
.toolbar{
margin: 0%;
display: flex;
position: absolute;
transition: .5s ease;
top: 0%;
left: 0%;
width: 1115px;
height: 37px;
}
.info{
position: inherit;
transition: .5s ease;
top: 18.5%;
margin: 1%;
left: 11%;
}

<div class="add">
<form [formGroup]="paginaForm" (submit)="onFormSubmit()">
<div formArrayName="forms">
<div class="drag" *ngFor="let form of forms; let i = index;" [formGroupName]="i">
<mat-toolbar class="toolbar" color="warn">
<div class="title">
<input class="form_name" placeholder="Formulier Naam" type="text" formControlName="form_name" #form_name />
<div class="cdkdrag" cdkDropList cdkDragBoundary=".add" cdkDrop></div>
</div>
<div
*ngIf="paginaForm.controls['form_name']?.invalid && (paginaForm.controls['form_name'].dirty || paginaForm.controls['form_name'].touched)"
class="alert alert-danger">
<div *ngIf="paginaForm.controls['form_name']?.errors.required">
Formuliernaam is required.
</div>
</div>
</mat-toolbar>
<div class="element">
<input class="voeg-element" placeholder="voeg element toe" type="text" formControlName="element" #element>
<div class="cdkdrag" cdkDropList cdkDragBoundary=".add" cdkDrop></div>
</div>
<div
*ngIf="paginaForm.controls['element']?.invalid && (paginaForm.controls['element'].dirty || paginaForm.controls['element'].touched)"
class="alert alert-danger">
<div *ngIf="paginaForm.controls['element']?.errors.required">
Element is required.
</div>
</div>
<div class="verwijder">
<button (click)="removePagina(i)">Verwijder Pagina</button>
<br><br>
</div>
<div class="opslaan">
<button (click)="addFolders(form_name.value, element.value)"
[disabled]="paginaForm.pristine || paginaForm?.invalid">Opslaan Pagina</button>
<br><br>
</div>
</div>
</div>
<div class="toevoegen">
<button type="button" (click)="addPagina()">
Pagina toevoegen
</button>
</div>
</form>
</div>

Answer 1

我通过在panelwrapper.component.html一个[cdkDragData]和formadd.component中添加来修复它.html

<legend class="voeg-element" placeholder="voeg element toe" cdkDropList
#doneList="cdkDropList"
[cdkDropListData]="done"
(cdkDropListDropped)="drop($event)">
<div [ngSwitch]="item" class="cdkdrag" *ngFor="let item of done" cdkDrag>

和formadd.component.ts我想保存的事件和数组。

done = [];
drop(event: CdkDragDrop<string[]>) {
console.log(event);
this.done.push(event.item.data);

工作正常！！ 希望我能帮助有同样问题的人。 :)