Question

我想在容器中设置可拖动元素的默认位置。

示例：https://material.angular.io/cdk/drag-drop/overview#restricting-movement-within-an-element

如何定位元素，例如居中？

Answer 1

只需使用普通的CSS定位元素即可。检查以下https://stackblitz.com/angular/ovlyobmkdnk?file=app%2Fcdk-drag-drop-axis-lock-example.css的堆栈闪电，这是更改后的https://stackblitz.com/edit/angular-54uare?embed=1&file=app/cdk-drag-drop-axis-lock-example.html

.container {
    display: flex;
  justify-content: center;
  background-color:red;
  align-items: center;
  height: 100vh;
}



.example-box {
  align
  width: 200px;
  height: 200px;
  border: solid 1px #ccc;
  color: rgba(0, 0, 0, 0.87);
  cursor: move;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: #fff;
  border-radius: 4px;
  position: relative;
  z-index: 1;
  transition: box-shadow 200ms cubic-bezier(0, 0, 0.2, 1);
  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
              0 2px 2px 0 rgba(0, 0, 0, 0.14),
              0 1px 5px 0 rgba(0, 0, 0, 0.12);
}

.example-box:active {
  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
              0 8px 10px 1px rgba(0, 0, 0, 0.14),
              0 3px 14px 2px rgba(0, 0, 0, 0.12);
}


<div class=container>
<div class="example-box" cdkDragLockAxis="y" cdkDrag>
  I can only be dragged up/down
</div>
</div>

Answer 2

从Angular Material版本8开始，以下输入可用：

@Input（'cdkDragFreeDragPosition'）freeDragPosition：{x：数字; y：   数; }

设置在放置容器外部的CdkDrag的位置。   可用于为回头用户恢复元素的位置。

https://material.angular.io/cdk/drag-drop/api#CdkDrag

可以在下面找到一个示例： https://angular-tft6n5.stackblitz.io

如何使用Angular Material DragAndDrop设置可拖动元素的默认位置？

2 个答案: