Перетащите CDK Angular выпуск - PullRequest
Новая
       102

Перетащите CDK Angular выпуск

0 голосов
/ 04 мая 2020

Я создал 1 контейнер с изображениями (используя ngb-carousel) и 3 зоны перетаскивания, где размещать эти изображения, однако у меня возникают некоторые проблемы, когда я пытаюсь передавать элементы между ними. Во-первых, я всегда получаю одинаковые индексы, когда пытаюсь переместить элемент из моего контейнера изображений в любую зону перетаскивания.

вот мой шаблон 

<mat-card class="card">
    <div
        cdkDropList
        #todoList="cdkDropList"
        [cdkDropListData]="images"
        [cdkDropListConnectedTo]="[doneList, intermedio, menos]"
        cdkDropListOrientation="horizontal"
        class="contenedor">
        <ngb-carousel *ngIf="images">
            <ng-template *ngFor="let img of images" ngbSlide>
                <div class="picsum-img-wrapper" [cdkDragData]="img" cdkDrag>
                    <img [src]="path+img.imagen" width="100%" alt="Random first slide">
                </div>
            </ng-template>
        </ngb-carousel>
    </div>

    <div class="results">
        <div class="talents">
            <div class="example-container">
                <h4>(+) Talento más desarrollado</h4>
                <div cdkDropList #doneList="cdkDropList" [cdkDropListData]="list2"
                     [cdkDropListConnectedTo]="[intermedio, menos]"
                     class="example-list" (cdkDropListDropped)="drop($event)">
                    <ol class="example-box">
                        <li *ngFor="let l2 of list2" [cdkDragData]="l2" cdkDrag>
                            {{l2.nombre}}
                        </li>
                    </ol>
                </div>
            </div>
        </div>
        <div class="talents">
            <div class="example-container">
                <h4>Talento Intermedio</h4>
                <div cdkDropList #intermedio="cdkDropList" [cdkDropListData]="list3"
                     [cdkDropListConnectedTo]="[doneList, menos]"
                     class="example-list" (cdkDropListDropped)="drop($event)">
                    <ol class="example-box">
                        <li *ngFor="let l3 of list3" [cdkDragData]="l3" cdkDrag>
                            {{l3.nombre}}
                        </li>
                    </ol>
                </div>
            </div>
        </div>
        <div class="talents">
            <div class="example-container">
                <h4>(-) Talento menos desarrollado</h4>
                <div cdkDropList #menos="cdkDropList" [cdkDropListData]="list4"
                     [cdkDropListConnectedTo]="[intermedio, doneList]"
                     class="example-list" (cdkDropListDropped)="drop($event)">
                    <ol class="example-box">
                        <li *ngFor="let l4 of list4" [cdkDragData]="l4" cdkDrag>
                            {{l4.nombre}}
                        </li>
                    </ol>
                </div>
            </div>
        </div>
    </div>
</mat-card>

вот моя функция перетаскивания 

drop(event: CdkDragDrop<any>) {
        if (event.previousContainer === event.container) {
            moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
        } else {
            /*transferArrayItem(event.previousContainer.data,
                event.container.data,
                event.previousIndex,
                event.currentIndex);*/

            const newArray = event.previousContainer.data.filter(e => e.id !== event.item.data.id);
            event.previousContainer.data = newArray;
            event.container.data.push(event.item.data)
        }
    }

Я попытался использовать TransferArrayItem, но это не сработало, так как я получил неправильный индекс, поэтому я попытался изменить event.previousContainer.data и event.container.data, я работаю с event.container.data, но это не так изменить event.previousContainer.data.

есть идеи, почему это не работает? заранее спасибо

...