时间戳

首页 > 解决方案 > Angular - 将父 div 的原点中心更改为左下角

html - Angular - 将父 div 的原点中心更改为左下角

问题描述

我的定位有问题<div>。这是我的场景：

我有一个parent div包含两个child div. 我@angular/cdk/drag-drop用于将两个子 div 拖放到父 div 中：

组件.html

<div class="badge-container" id="badge">
  <div
    (cdkDragEnded)="dragEnd($event)"
    class="badge-text"
    id="nominative"
    cdkDragBoundary=".badge-container"
    [cdkDragFreeDragPosition]="dragNominativePosition"
    cdkDrag
  >
    My Test
  </div>
  <div
    (cdkDragEnded)="dragEnd($event)"
    class="badge-text"
    id="nominative"
    cdkDragBoundary=".badge-container"
    [cdkDragFreeDragPosition]="dragCompanyPosition"
    cdkDrag
  >
    My TEST test TEST
  </div>
</div>

组件.ts

import {Component, OnInit} from '@angular/core';

@Component({
  selector: 'cdk-drag-drop-overview-example',
  templateUrl: 'cdk-drag-drop-overview-example.html',
  styleUrls: ['cdk-drag-drop-overview-example.css'],
})
export class CdkDragDropOverviewExample implements OnInit{
  dragNominativePosition = {x: 0, y: 50};
  dragCompanyPosition = {x:0, y: 0};

  ngOnInit() {
    
  }
}

在“component.ts”中，我使用坐标来设置子 div 的位置x:0。

我的问题是子 div 的位置不在父 div 的左边距，而是在父 div 的中心。所以我意识到坐标x：0和y：0对应于父div的中心。

我想知道是否有办法像经典的笛卡尔平面一样在左下角移动父 div 的 x:0 和 y:0。

这是我的堆栈闪电战

提前致谢

标签： htmlcssangularangular-cdk

解决方案

通过从 css .badge-container 中移除，“justify-content: center;”解决。

推荐阅读