在对 Angular Material 10 进行更新后，我遇到了拖放指令的问题。enter, incdkDropList不再存在，所以我的代码

this.placeholder.enter(drag, drag.element.nativeElement.offsetLeft, drag.element.nativeElement.offsetTop);

不工作。我试图找出解决方案，但没有成功。这是不推荐使用的enter函数https://stackblitz.com/edit/angular-dragdrop-grid-pnyded的示例， 谁能帮我解决这个问题？非常感谢

我已经这样做了：

<div mat-dialog-title
     cdkDrag
     cdkDragRootElement=".cdk-overlay-pane"
     cdkDragHandle>
</div>

但该解决方案导致对话框可以通过单击窗口的任何位置进行拖动，这使得对话框无法<textarea>在内容块内扩展。理想情况下，我需要一种方法使其仅通过单击标题即可拖动。

我想将占位符高度设置为拖动元素的高度。

现在我使用最小可能元素高度的静态高度占位符。我找不到任何有关如何执行此操作的信息，目前还不知道。

组件 HTML

<div class="taskList" cdkDropList id="{{ 'cdk-task-drop-list-' + categoryId }}" [cdkDropListData]="taskList"
[cdkDropListConnectedTo]="categoryIdList" (cdkDropListDropped)="onDrop($event)">
    <ng-container *ngIf="task.isApproved || task.authorId===userId || userAccessLevel >= 3">
        <div class="placeholder" *cdkDragPlaceholder></div>
        <div class="task">
            ...
        </div>
    </ng-container>
</div>

CSS

.placeholder{
    position: relative;
    margin-top: 1px; 
    margin-bottom: 5px;
    min-height: 75px;
    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
    vertical-align: middle;
}

有任何想法吗？

我正在尝试使用 div 元素标签并使其表现为带有 css 的文本区域。

#textarea {
    -moz-appearance: textfield-multiline;   ------------ card.component.css
    -webkit-appearance: textarea;
    border: 1px solid gray;
    font: medium -moz-fixed;
    font: -webkit-small-control;
    height: 28px;
    overflow: auto;
    padding: 2px;
    resize: both;
    width: 400px;
}

<div id="textarea" contenteditable>I look like a textarea</div>  ---- card.component.html

但我在我的卡上从父组件（类别组件）使用 cdkDrag

<div cdkDrag class="col-sm-12 px-2 pb-2">
  <app-card (cardEvent)="deleteCard($event)" [card]="card">

我发现此链接contenteditable 无法与 google-chrome 上的 cdkDrag 正常工作，解释相同，但无法得到任何答案。

我发布这个问题只是为了自己回答，以防有人像我一样挣扎！

我正在开发一个 angular 项目来实现一个类似 Trello 的应用程序。我希望能够将一个元素从一个列表拖到另一个列表中，所以我安装了 Angular cdk 模块并遵循了他们的指南。

注意：我的应用程序被分成几个页面/组件，我正在实现该接口 (Trello) 的页面被称为BoardPageComponent。

首先，我添加了cdkDrag指令，元素变得可拖动，这是一个好的开始！

然后我将cdkDropList指令添加到父元素，子元素仍然可以拖动，但它们的样式在拖动时不再起作用！

解决方案

当在 a 内部拖动元素时cdkDropList，DragAndDropModule会创建该元素的副本，但位于文档的正文级别。因此，如果您的组件被封装，那么它的样式将不适用！

解决方案 1：一种快速解决方案是移动该可拖动元素的样式并将其放入全局样式文件中。

解决方案 2：另一种解决方案是禁用该组件的封装ViewEncaplusation.None：

@Component({
  selector: 'app-board-page',
  templateUrl: './board-page.component.html',
  styleUrls: ['./board-page.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class BoardPageComponent implements OnInit, OnDestroy {
  ....
}

这会起作用，但您应该意识到这可能会将某些样式泄露给应用程序的其他组件。所以一定要手动封装组件的样式。

或者也许有另一种方式？

这个问题已经在 SO 上多次提出，但不是最近，这里的例子比我见过的其他例子更完整。拖放用材质树的最好的FPGA实现是这样的一个张贴在这里的媒体通过@ inorganik。

我在这里克隆了 StackBlitz。

但是，我的问题是只有在节点上至少有一个子元素时才能移动节点。例如，如果您从 Application 中删除所有子节点，然后尝试将其添加回 Application。

如果节点有兄弟节点，则删除的节点只会插入到父节点中，在第 232 行：

    // insert node 
    const newSiblings = findNodeSiblings(changedData, nodeAtDest.id);
    if (!newSiblings) return;
    newSiblings.splice(relativeIndex, 0, nodeToInsert);

对我来说，解决方案是跟踪用户在放下移动节点时是否将其悬停在另一个节点上似乎合乎逻辑，然后假设用户希望将悬停节点设为父节点，请查看屏幕截图：

我的问题是：这是解决这个问题的最佳方法吗？如果是这样，如何使用 Angular Drag Drop CDK 跟踪悬停的节点？

更新：

我已经让这个功能部分工作了。我在这里更新了StackBlitz。

我dragHover根据我发现的 mat-tree DnD 的其他实现更新了该方法，它根据用户将悬停节点拖动到右侧的距离设置插入模式：

  dragHover(node: FileFlatNode) {
    // untype the event
    const newEvent: any = event;
    const percentageX = newEvent.offsetX / newEvent.target.clientWidth;
    if (percentageX > .25) {
      this.dragNodeInsertToParent = true;
    } else {
      this.dragNodeInsertToParent = false; …

我在我的项目中使用角度材质 cdk 拖放，首先动态创建元素，然后将其拖放到屏幕上的任何位置。

当我创建 2 个 div 并将 div 拖到 div 上时，有没有办法知道 div 何时掉落到其他 div 上？

我希望当 div 位于 div 内部时将附加 div 着色为其他颜色。

谢谢

我有几列，每列都有几个小部分，其中有一些字段。

我需要对此应用角度材质拖放，因此，我应该能够在列中移动组，也应该能够在列中移动组在组内移动字段（字段的顺序将被更改） ）跨组移动字段（因此组 2 中的字段可以进入组 1 或组 4 内）

我正在努力实现这一目标。

这是我创建的示例的链接

https://stackblitz.com/edit/nested-connected-lists-gtckyc?file=app/cdk-drag-drop-connected-sorting-group-example.ts

我创建了一个图片库，我打算改变它们之间的位置。为此，我使用拖放 cdk 库。

我的问题是图像交换并不总是正确发生，有时我将第一张图像与第二张图像交换，但这种交换不会发生。

我怎样才能拥有这个功能齐全的水平和垂直功能？

有没有一种方法只能在图像存储在 mdc-image-list - with-text-protection 类中时才开始拖动？

谢谢 ！

演示版

.HTML

  <ul class="mdc-image-list my-image-list" style="padding-left: 10px;padding-right: 10px;" cdkDropList [cdkDropListData]="data"
           (cdkDropListDropped)="drop($event)">
    <ng-container *ngFor="let product of data; let  j = index;">
      <li class="mdc-image-list__item" cdkDrag>
        <div class="mdc-image-list__image-aspect-container">
          <ng-container *ngIf="product.image == null; else productImage">
            <img src="" class="mdc-image-list__image imagenotfound">
          </ng-container>
          <ng-template #productImage>
            <img [src]="product.image" class="mdc-image-list__image">
          </ng-template>
        </div>
        <div class="mdc-image-list--with-text-protection">
        <div class="mdc-image-list__supporting mdc-image-list__supporting">
        <span class="mdc-image-list__label">{{product.name}}</span>
        </div>
        </div>
      </li>
    </ng-container>
  </ul>

.ts

    drop(event: CdkDragDrop<string[]>) {
    if (event.previousContainer === event.container) {
      moveItemInArray(
        event.container.data,
        event.previousIndex,
        event.currentIndex …

这就是我遇到的情况，我需要使用 Angular 中的 mat-table 和 cdkDragDrop （使用 Angular 8）创建列拖放功能。

这是我到目前为止所拥有的。

在 component.html 中我有：

<mat-table cdkDropList cdkDropListOrientation="horizontal" (cdkDropListDropped)="drop($event)" [dataSource]="dataSource">

  <ng-container *ngFor="let column of columns; let i = index" [matColumnDef]="column.name">

    <mat-header-cell *matHeaderCellDef cdkDrag cdkDragLockAxis="x">
      {{column.title}}
    </mat-header-cell>

    <mat-cell *matCellDef="let element">{{ element[column.name] }}</mat-cell>

  </ng-container>

  <mat-header-row *matHeaderRowDef="displayedColumns" class="tableHeaderRow" #tableHeaderRow></mat-header-row>
  <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>

在 component.ts 内部我有：

export class TestClass implements OnInit {
  displayedColumns = ['id', 'firstName', 'lastName', 'email', 'phoneNumber', 'address', 'points', 'Details'];
  .
  .
  .
  columns: any[] = [{
        name: 'id',
        title: 'Id' …