angular - 如何在Angular Material 7中自定义CSS拖拽，拖拽预览，拖拽占位符？

Question

我找到了一些关于如何使用 .cdk-drag-preview 的基本示例和 .cdk-drag-placeholder类，当没有嵌套元素时，它们似乎可以完成这项工作。

基本上，我有一个 Action 列表，每个 Action 都用一个复杂的 mat-card 表示。格式。这部分实际上是作为另一个组件完成的，但为了这个示例，我将尽可能使其基本。

我的示例类似于此结构:

<style>
    .my_action { border: 2px solid red; }
</style>

<div class="drop_area" cdkDropList>
    <div *ngFor="let action of actions"
        (cdkDragStarted)="dragStart($event, action)"
        (cdkDragMoved)="dragMoved($event, action)"
        (cdkDragEnded)="dragEnded($event, action)" cdkDrag>

        <mat-card class="my_action">
            {{ action.name }}
        </mat-card>

    </div>
</div>

在 Angular 分量中

dragStart(e, action) { 
    // initialize start X coord
    this.startX = 0;

    // initialize start Y coord
    this.startY = 0;
}

dragMoved(e, action) {
    // record new position
    this.endX = e.pointerPosition.x;
    this.endY = e.pointerPosition.y;

    // logic to set startX and startY
    // TRYING TO CHANGE CARD BORDER COLOR IF this.endX - this.startX > some number
}

我希望能够做到以下几点:

向左拖动卡片时，将其边框颜色更改为蓝色，向右拖动时更改为绿色

相应地更改拖动占位符的边框颜色。

使用问题 .cdk-drag-preview和 .cdk-drag-placeholder似乎适用于可拖动的 div ( mat-card 的父级)；而我正在尝试更改其 child 的边框颜色。

提前致谢 :)

附录

我最重要的挑战是更改拖动占位符中的边框颜色。
我正在尝试更改占位符的边框颜色和左边距以指示用户操作已向左或向右移动，代表列表中的不同级别。

Answer 1

像下面这样的东西会实现你的目标吗？

初始化 nativeElement x 和 y

dragStart(e, action) {
    const rect = e.source.element.nativeElement.getBoundingClientRect();

    // initialize start X coord
    this.startX = rect.x;
    // initialize start Y coord
    this.startY = rect.y;
  }

比较 X 偏移并使用 rendere2在 nativeElement 上设置样式

dragMoved(e, action) {
    // record new position
    this.currentX = e.event.clientX;
    this.currentY = e.event.clientY;
    // logic to set startX and startY
    // TRYING TO CHANGE CARD BORDER COLOR IF this.endX - this.startX > some number
    if(this.startX < this.currentX){
      this._renderer.setStyle(e.source.element.nativeElement, 'border-style', 'solid');
      this._renderer.setStyle(e.source.element.nativeElement, 'border-color', 'green');
    }
    else if (this.startX > this.currentX){
      this._renderer.setStyle(e.source.element.nativeElement, 'border-style', 'solid');
      this._renderer.setStyle(e.source.element.nativeElement, 'border-color', 'blue');
    }
  }

修订:

要在拖动时更改颜色，请执行以下操作。

引用 #cdkDropList在 View 中。

@ViewChild('cdkDropList') _dropList:any;

在 *ngFor 中设置索引

*ngFor="let action of actions; let i = index"

将索引传递给函数

(cdkDragMoved)="dragMoved($event, action, i)"

接收索引并接触到 cdkDropList 的子代设置样式。

dragMoved(e, action, i) {
    // record new position
    this.currentX = e.event.clientX;
    this.currentY = e.event.clientY;
    // logic to set startX and startY
    // TRYING TO CHANGE CARD BORDER COLOR IF this.endX - this.startX > some number
    if(this.startX < this.currentX){
      this._renderer.setStyle(this._dropList.nativeElement.children[i], 'border-style', 'solid');
      this._renderer.setStyle(this._dropList.nativeElement.children[i], 'border-color', 'green');
    }
    else if (this.startX > this.currentX){
      this._renderer.setStyle(this._dropList.nativeElement.children[i], 'border-style', 'solid');
       this._renderer.setStyle(this._dropList.nativeElement.children[i], 'border-color', 'blue');
    }
  }

Stackblitz

https://stackblitz.com/edit/angular-hdskvc?embed=1&file=app/cdk-drag-drop-overview-example.ts