Cdk 拖放角度而不循环

Question

如何使用角度 Ckd 拖放避免循环。我想在 HTML 中单独列出 div，以便稍后可以单独使用它们。而不是使用 ngFor。 像这样的东西： 但它不起作用，不拖拉。

<div #dropListContainer class="example-container" cdkDropListGroup>
  <div
    cdkDropList
    [cdkDropListData]="0"
  >
    <div
      cdkDrag
      [cdkDragData]="0"
      (cdkDragEntered)="dragEntered($event)"
      (cdkDragMoved)="dragMoved($event)"
      (cdkDragDropped)="dragDropped($event)"
      class="example-box"
    >
    <svg width="24px" fill="currentColor" viewBox="0 0 24 24">
      <path d="M10 9h4V6h3l-5-5-5 5h3v3zm-1 1H6V7l-5 5 5 5v-3h3v-4zm14 2l-5-5v3h-3v4h3v3l5-5zm-9 3h-4v3H7l5 5 5-5h-3v-3z"></path>
      <path d="M0 0h24v24H0z" fill="none"></path>
    </svg>
     0
    </div>
  </div>


  <div

    cdkDropList
    [cdkDropListData]="1"
  >
    <div
      cdkDrag
      [cdkDragData]="1"
      (cdkDragEntered)="dragEntered($event)"
      (cdkDragMoved)="dragMoved($event)"
      (cdkDragDropped)="dragDropped($event)"
      class="example-box"
    >
    <svg width="24px" fill="currentColor" viewBox="0 0 24 24">
      <path d="M10 9h4V6h3l-5-5-5 5h3v3zm-1 1H6V7l-5 5 5 5v-3h3v-4zm14 2l-5-5v3h-3v4h3v3l5-5zm-9 3h-4v3H7l5 5 5-5h-3v-3z"></path>
      <path d="M0 0h24v24H0z" fill="none"></path>
    </svg>
     1
    </div>
  </div>

  </div>
</div>

enter code here

Answer 1

有效，请参阅stackblitz（在stackblitz中唯一的是可以拖动，但当放置时什么也不做。

但是请注意，您有两个 cdkDropList 以及唯一的 cdkDrag。

如果你有一个独特的 cdkDropList 和两个 cdkDrag

您需要认为 cdk 拖放只是更改数据的一种复杂方法（在拖放中，您使用 .ts 中的变量制作“某些东西”）

更新 问题是：你想“展示”什么？在 Angular 中，.ts 中有变量“创建”.html。 cdkdroplist 就像一个简单的“输入”，一种在屏幕上显示“某些内容”的方法以及更改变量值的方法。

我们可以，例如想象一下我们可以“交换”数组“数据”的元素

data=[0,0]

cdkDropList 可以是

<div cdkDropList [cdkDropListData]="data">
  <div cdkDrag [cdkDragData]="0">
   ...
   {{data[0]}}
  </div>
</div>

<div cdkDropList [cdkDropListData]="data">
  <div cdkDrag [cdkDragData]="1">
   ...
   {{data[1]}}
  </div>
</div>

看到在dragDropped函数中是

  dragDropped(event: CdkDragDrop<any>) 
  {
       event.previousContainer.data //<--is the cdkDropListData of the cdkdroplist 
                                    //(in this case the array data)
                                    //we are dragging
       event.container.data //<--is the cdkDropListData of the cdkdroplist
                                    //(in this case also the array data)
                                     //where we dropped
       event.item.data //<--is the cdkDragData of the cdkDrag
  }

所以，我们可以做类似的事情

  dragDropped(event: CdkDragDrop<any>) {
    event.container.data[event.item.data]++;
  }

看到我们唯一做的就是增加指定位置的数组元素。删除后我们可以在.html中看到“结果”

看到我们可以使用两个按钮而不是使用 cdkDropList 来完成相同的操作：我们可以在 cdkdroplist 中像“UI”一样思考来更改变量