Question

在拖动项目时使用* cdkDragPreview可以更改位置吗？现在，我在拖动时所做的样式始终显示在光标的右下角。我想将其放在左上方。

是否有任何帮助来解决这个问题？：）

Answer 1

是的，您可以订阅 cdkDragMoved 并抵消您的* cdkDragPreview 。

示例

以下示例将使您的预览在x和y轴上偏移100像素

<div cdkDrag
    [id]="storageNode.barcode"
    [cdkDragData]="storageNode"
    [cdkDragDisabled]="dragDisabled"
    (cdkDragMoved)="onDragMove($event)">
    <div title="Drag this entity and its children"
        class="entity-drag-handle"
        cdkDragHandle>

        {{storageNode.barcode}}
        <mat-icon *ngIf="!dragDisabled">
        drag_indicator
        </mat-icon>
    </div>
    <div
      [id]="storageNode.barcode + 'preview'"
      [ngStyle]="{'background-color': this.getBackgroundColor(0.6)}"
      class="entity-drag-preview"
      *cdkDragPreview>
         <h4>{{storageNode.barcode}}</h4>
         <p>{{formattedDescription}}</p>
    </div>
</div>

请记住，这使用了打字稿3.7功能，这些功能在旧版本中将不可用

public onDragMove(event: CdkDragMove<StorageEntity>): void {
    const nodeMovePreview = new ElementRef<HTMLElement>(document.getElementById(this.storageNode.barcode + 'preview'));
    const xPos = event.pointerPosition.x - 100;
    const yPos = event.pointerPosition.y - 100;
    if (nodeMovePreview?.nativeElement) {
        nodeMovePreview.nativeElement.style.transform = `translate3d(${xPos}px, ${yPos}px, 0)`;
    }
}

Answer 2

[HTML]

<div
    cdkDrag
    (cdkDragReleased)="cdkDragReleased($event, i)"
    (cdkDragDropped)="cdkDragDropped($event)">

 <div class="my-placeholder" *cdkDragPlaceholder></div>

 <div class="my-preview" *cdkDragPreview></div>

</div>

[CSS]

.my-placeholder {
  background-color: #000;
}
.my-preview {
   transform: scale(0.7) translate(-200px, -100px);
}

我在.my-preview中使用了translate，将项目同时放置在x轴和y轴上，然后使用比例尺将其缩小以使其看起来更小

* cdkDragPreview定位角材料

2 个答案: