Блог

Я пытаюсь использовать угловые материалы для создания функции сопоставления столбцов, как показано на рисунке ниже. Идея заключается в том, что пользователь может взять один набор столбцов и сопоставить их с другим набором столбцов. Есть несколько примеров того, как использовать перетаскивание для перемещения элементов между двумя списками, однако, будучи новичком в угловых (материалах) Я изо всех сил пытаюсь понять, как подойти к этой конкретной проблеме. Элементы, перетаскиваемые из списка вправо, должны быть отброшены/заменены «пустыми» позициями в списке слева, вместо того, чтобы перемещаться между существующими элементами. Возможно ли добиться такого поведения с помощью cdkDropList?

Обновить

Я добился некоторого прогресса в этом, создав пользовательскую функцию удаления, в которой я меняю местами целевой и исходный элемент. Все еще не уверен, что это лучший вариант, хотя. Я работаю с функциональностью-тиски, однако это выглядит не очень хорошо, и все равно похоже, что вы помещаете элемент между двумя другими элементами в целевом списке (см. Скриншот). Я так и не смог понять, как это обойти. Ценю любой вклад.

Из файла .ts.

   onDrop(event: CdkDragDrop<string[]>): void {

    if (event.previousContainer === event.container) {

      moveItemInArray(

        event.container.data,
        event.previousIndex,
        event.currentIndex

      );

    } else {


      if (event.container.data[event.currentIndex] === "" amp;amp; event.previousContainer.data[event.previousIndex] !== "") {

        let placeholder = event.previousContainer.data[event.previousIndex];
        event.previousContainer.data[event.previousIndex] = event.container.data[event.currentIndex];
        event.container.data[event.currentIndex] = placeholder;

      }

    }

  }
 

Из файла .html.

 <div cdkDropListGroup>
    
    <div class="list-container">

        <div class="list-child">

            <h3>Target Columns</h3>

            <div>

                <div class="drag-item" *ngFor="let column of referenceColumns">
            
                    {{ column }}
            
                </div>
            
            </div>

        </div>

        <div class="list-child">

            <h3>Mapping</h3>

            <div cdkDropList 
                
                id="targetColumnsList"
                [cdkDropListConnectedTo]="['sourceColumnsList']"
                (cdkDropListDropped)="onDrop($event)" 
                [cdkDropListData]="targetColumns"
                [cdkDropListEnterPredicate]="allowPredicate"
                style="padding-right: 50px;">

                <div class="drag-item" cdkDrag [cdkDragDisabled]="column === ''" [cdkDragData]="column" cdkDrag *ngFor="let column of targetColumns">

                    {{ column }}

                </div>

            </div>

        </div>

        <div class="list-child">

            <h3>Source Columns</h3>

            <div cdkDropList 

                id="sourceColumnsList"
                [cdkDropListConnectedTo]="['targetColumnsList']"
                (cdkDropListDropped)="onDrop($event)" 
                [cdkDropListData]="sourceColumns"
                [cdkDropListEnterPredicate]="allowPredicate">

                <div class="drag-item" cdkDrag [cdkDragDisabled]="column === ''" [cdkDragData]="column" *ngFor="let column of sourceColumns">
            
                    {{ column }}
            
                </div>
            
            </div>

        </div>


    </div>

</div>
 

From .scss file.

 .drag-item {

    padding: 0.5em;
    border: 1px solid gray;
    background-color: rgb(200, 200, 200);
    margin-bottom: 8px;
    max-width: 200px;
    min-height: 30px;

    amp;.cdk-drag-disabled {
        background: #ddd;
        border: dotted 1px #999;
        cursor: defau<
      }

}

.cdk-drag-preview {

    background-color: white;
    box-shadow: 0px 0px 8px 2px whitesmoke;
    color: grey;

}

.cdk-drag-placeholder {

    opacity: 0.5;

}

.cdk-drag-animating {

    transition: transform 200ms cubic-bezier(0, 0, 0.2, 0)

}