Как сделать панель панели перетаскиваемой в угловых - PullRequest
Новая
       22

Как сделать панель панели перетаскиваемой в угловых

2 голосов
/ 17 октября 2019

Итак, я был новичком в Angular и пробовал некоторые компоненты Kendo для 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>

1 Ответ

0 голосов
/ 07 ноября 2019

Я исправил это, добавив в panelwrapper.component.html a [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);

Сработало нормально !! Надеюсь, я смогу помочь тому, у кого была та же проблема, что и у меня. :)

...