Как использовать модуль перетаскивания Angular для перетаскивания элемента на другой? - PullRequest
Новая
       39

Как использовать модуль перетаскивания Angular для перетаскивания элемента на другой?

0 голосов
/ 10 января 2020

Я не могу понять, как использовать Angular ' Модуль перетаскивания для чего-то другого, кроме перемещения элементов между списками.

У меня есть список предметов, и я хочу перетащить их на отдельные группы. Кстати, здесь задействованы два списка: один список с группами и один список с элементами.

Вот код шаблона (полный код см. Здесь https://stackblitz.com/edit/angular-xp4um9): 

<div class="container">
  <div class="drop-target"> 
    <mat-selection-list 
      cdkDropList
      #dropTarget="cdkDropList"
      (cdkDropListDropped)="drop($event)"
      [cdkDropListData]="groups"
    >
      <mat-list-option *ngFor="let group of groups" [value]="group.id"
      >
        {{ group.name }}
      </mat-list-option>
    </mat-selection-list>
  </div>

  <div class="drag-source">
    <mat-selection-list 
      cdkDropList
      [cdkDropListConnectedTo]="[dropTarget]"
    >
      <mat-list-option *ngFor="let item of items" [value]="item.id"
        cdkDrag
        [cdkDragData]="item"
      >
        {{ item.name }}
      </mat-list-option>
    </mat-selection-list>
  </div>
</div>

Я хочу перетащить элемент из второго списка и удалить это на группу в первом списке, не как новый элемент второго списка, как это задокументировано везде в inte rnet, но чтобы стать частью группы, на которую оно сброшено.

Я бы хотел бы иметь возможность получить в функции drop () исходный элемент и целевую группу.

Кроме того, как я могу предотвратить сокращение первого списка при перетаскивании элемента поверх второго списка, а также предотвратить его появляются под группами (как на картинке ниже)?

enter image description here

Спасибо.

1 Ответ

0 голосов
/ 11 января 2020

самое закрытое, что я получаю, это этот стек

У меня есть три идеи

1.-Сделать пустой div как cdkDragPlaceholder 

<div class="line" *cdkDragPlaceholder></div>

2.-Преобразуйте уникальный cdkDropList, в который мы можем поместить столько cdkDropList, сколько элементов у нас есть. Для этого необходимо использовать cdkDropListGroup и добавить свойство ie cdkDropListSortingDisabled = "true" к каждому cdkList. Причина в том, что еще неясно, когда мы делаем отбрасывание того, какой элемент вы отбрасываете

3. - Есть два списка для элемента, которые можно перетаскивать и использовать (cdkDragStarted) (cdkDragEnded), чтобы изменить style.display на нет при перетаскивании

. html

<div cdkDropListGroup>
    <div class="example-container">
        <h2>To do</h2>

        <div class="example-list" id="todoList">
            <div *ngFor="let item of todo;let i=index"
        cdkDropList cdkDrag
        cdkDropListSortingDisabled="true" 
        [cdkDragDisabled]="true"
                [cdkDropListConnectedTo]="[doneList]" 
                (cdkDropListDropped)="drop($event,i)" class="example-box"
        >{{item}}</div>
        </div>
    </div>

    <div class="example-container">
        <h2>Done</h2>
        <div>
            <div [style.display]="onDrag?'none':''" cdkDropList id="doneList" 
                 [cdkDropListData]="done"
                  class="example-list" (cdkDropListDropped)="drop($event)">
                <div class="example-box" *ngFor="let item of done" 
           cdkDrag 
          (cdkDragStarted)="onDrag=true"
                    (cdkDragEnded)="onDrag=false">
          {{item}}
                    <div class="line" *cdkDragPlaceholder></div>
                </div>
            </div>
        </div>
        <div class="background" *ngIf="onDrag">
            <div class="example-list">
                <div class="example-box" *ngFor="let item of done">{{item}}
                </div>
            </div>
        </div>
    </div>
</div>

И функция сброса как 

  drop(event: CdkDragDrop<string[]>,index:number) {
      console.log(event.previousContainer.data[event.previousIndex],
                  '-->',
                  this.todo[index]);
  }
...