*cdkDragPreview Позиционирование углового материала

Question

Можно ли изменить положение при использовании *cdkDragPreview при перетаскивании элемента? Прямо сейчас стиль, который я делал при перетаскивании, появляется всегда внизу справа от курсора. Я хотел бы разместить его в верхнем левом углу.

Любая помощь в получении этого в положении?:)

Answer 1

Да, вы можете подписаться на cdkDragMoved и сместить свой *cdkDragPreview.

пример

В следующем примере ваш предварительный просмотр будет смещен на 100 пикселей по осям x и y.

<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);
}

Я использовал translate в.my-preview, чтобы разместить элемент как по оси X, так и по оси Y, затем масштаб используется для уменьшения, чтобы он выглядел меньше