Компонент кендо как cdkDragData - PullRequest
Новая
       25

Компонент кендо как cdkDragData

0 голосов
/ 25 октября 2019

Мне было интересно, возможно ли иметь компонент кендо или любой другой компонент как cdkDragData. Я хочу перетащить заголовок со своей панели, но когда я его удаляю, я хочу увидеть компонент. Например, если я хочу перетащить заголовок текстового поля, я хочу, чтобы текстовое поле появилось в пропущенной области. Что-то вроде этого, я знаю, что это не правильно, потому что когда я удаляю это, моя консоль говорит, что что-то пропущено, но данные не определены.

panelwrapper.component.html 

<kendo-panelbar class="panelbar">
    <kendo-panelbar-item class="panelbar-een" [title]="'Elementen'" cdkDropList cdkDropListSortingDisabled>
        <kendo-panelbar-item class="panelbar-twee" [title]="'Categorie'" icon="custom-icon" cdkDrag [cdkDragData]="'Categorie'"></kendo-panelbar-item>
        <kendo-panelbar-item class="panelbar-drie" [title]="'Textbox'" icon="textbox" cdkDrag [cdkDragData]= input kendoTextBox></kendo-panelbar-item>
        <kendo-panelbar-item class="panelbar-vier" [title]="'Textarea'" icon="textarea" cdkDrag [cdkDragData]="'Textarea'"></kendo-panelbar-item>
        <kendo-panelbar-item class="panelbar-vijf" [title]="'Date'" icon="calendar-date" cdkDrag [cdkDragData]="'Date'"></kendo-panelbar-item>
        <kendo-panelbar-item class="panelbar-zes" [title]="'Email'" icon="email-box" cdkDrag [cdkDragData]="'Email'"></kendo-panelbar-item>
        <kendo-panelbar-item class="panelbar-twee" [title]="'Integer'" icon="custom-format" cdkDrag [cdkDragData]="'Integer'"></kendo-panelbar-item>
        <kendo-panelbar-item class="panelbar-drie" [title]="'Boolean'" icon="check-circle" cdkDrag [cdkDragData]="'Boolean'"></kendo-panelbar-item>
        <kendo-panelbar-item class="panelbar-vier" [title]="'Checkbox'" icon="checkbox-checked" 
    </kendo-panelbar-item>
</kendo-panelbar>

Кто-нибудь знает, как это сделать? Место, где я отбрасываю заголовок, находится вне этого компонента. Я создал сгруппированный CDK:

app.component.html 

<div class="grouped" cdkDropListGroup>
        <div class="pagina-add">
            <app-formadd class="formadd"></app-formadd>
        </div>
        <div class="panel">
            <app-panelwrapper></app-panelwrapper>
        </div>
    </div>

formadd.component.html 

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