Как установить положение по умолчанию перетаскиваемого элемента с помощью Angular Material DragAndDrop? - PullRequest
Новая
       40

Как установить положение по умолчанию перетаскиваемого элемента с помощью Angular Material DragAndDrop?

2 голосов
/ 06 марта 2019

Я хотел бы установить положение по умолчанию перетаскиваемых элементов в контейнере.

Пример: https://material.angular.io/cdk/drag-drop/overview#restricting-movement-within-an-element

Как я могу расположить элемент, например центр-центр

Ответы [ 2 ]

1 голос
/ 20 июня 2019

Начиная с версии 8 Углового материала, доступны следующие данные:

@ Input ('cdkDragFreeDragPosition') freeDragPosition: {x: number; у: число; }

Устанавливает позицию CdkDrag, которая находится вне контейнера отбрасывания. Может использоваться для восстановления позиции элемента для возвращающегося пользователя.

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

И пример можно найти по следующему адресу: https://angular -tft6n5.stackblitz.io

1 голос
/ 06 марта 2019

просто используйте обычный 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>
...