Question

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

这是我的面板栏中的代码

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

我通过将[cdkDragData]添加到 panelwrapper.component.html 和 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);

工作正常！希望我可以帮助遇到同样问题的人。：）

如何使面板栏可拖动成角形

1 个答案: