Angular 7/8 Drag and Drop с CDK - PullRequest
Новая
       15

Angular 7/8 Drag and Drop с CDK

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

Я новый пользователь с функцией Angular Drag & Drop. В Моем Приложении есть много данных в таблице, и у каждой таблицы есть опция выбора, и в опции выбора будут отбрасывать данные из плоского массива. Пожалуйста, смотрите мою структуру данных ниже: 

Data

  dropdata:any = [
    {
      name: "Imran",
      select_op_val: ["todat", "tomorro"]
    },
    {
      name: "Noor",
      select_op_val: ["tomorro", "todat"]
    },
    {
      name: "Salma",
      select_op_val: ["tomorro", "todat", "next"]
    }
  ]

  drag:any =["today", 'tomorrow', 'next'] 

Function
  onDrop(event: CdkDragDrop<string[], 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);
    }
  }

HTML

<ul *ngFor="let arr of dropdata">
  <h3>{{arr.name}}</h3>
  <li
    cdkDropList
    #dragTo="cdkDropList"
    [cdkDropListData]="arr.select_op_val"
    [cdkDropListConnectedTo]="[dragFrom]"
    (cdkDropListDropped)="onDrop($event)">
    <p *ngFor="let ar of arr.select_op_val" cdkDrag>
      <span>::: {{ar}}</span>
    </p>
  </li>
</ul>

  <!--test drop table end-->

  <div class="keyword_and_promt_bucket">
    <label for="">Keyword and Prompt Bucket</label>
    <div class="textarea">
      <ul
        cdkDropList
        class="tag_container"
        #dragFrom="cdkDropList"
        [cdkDropListData]="drag"
        [cdkDropListConnectedTo]="[dragTo]"
        (cdkDropListDropped)="onDrop($event)">
        <li class="tag" *ngFor="let emailList of drag" cdkDrag>
          {{ emailList }}
          <span (click)="deleteEmail(emailList)"></span>
        </li>
      </ul>
    </div>
  </div>

Когда я перетаскиваю из данных перетаскивания для перетаскивания данных, все работает нормально, но при попытке перетащить из перетащите в dropdata> select_op_val тогда не работает.

...