Angular Material - 移動元素到新位置
P粉121081658
2023-09-01 09:12:46
<p>我需要有關 Angular 材質拖放的幫助</p>
<p>這個想法是我可以沿著 Y 軸移動螢幕上的黑色區塊，為此我使用 Angular Material 拖放，為此我有 3 個方法 onDragMoved、onDragStart、onDragEnd。當我釋放滑鼠時，我將在高度上添加100px，當我想第二次開始移動該塊時，它應該從上次停止的位置開始移動，但這種情況不會發生，某種原因發生抽搐</p>
<p>有問題的影片 - https://dropmefiles.com/0XFU6</p>
<pre class="brush:php;toolbar:false;">onDragMoved(event: CdkDragMove) {
console.log('движемся')
console.log(event)
console.log('neeeew coord', this.qwwqwqw)
// if(this.qwwqwqw != null && event != null) {
// event.distance.y = this.qwwqwqw
// event.pointerPosition.y = this.qwwqwqw
// this.qwwqwqw = null;
// }
}
onDragStart(event: CdkDragMove) {
console.log('Кнопка мыши зажата');
console.log(event.distance)
}
onDragEnd(event: CdkDragMove) {
console.log('Кнопка мыши отпущена');
console.log(event)
const y = event.distance.y 100; // получаем координату Y курсора мыши при отпускании элеоентале обн
const element = event.source.element.nativeElement;
element.style.transform = `translate3d(0, ${y}px, 0)`; // устанавливаем новую позицию элемента соооощзицию элемента
element.style.height = this.originalHeight 'px'; // восстанавливаем исходную высоту блока
event.distance.y = y;
this.qwwqwqw = y;
}</pre>
<pre class="brush:php;toolbar:false;"><div class="example-box" cdkDragLockAxis="y" cdkDrag (cdkDMoved)=&ragquot;onDunquot; )="onDragStart($event)" (cdkDragEnded)="onDragEnd($event)">
Координаты: {{ posX }}, {{ posY }}
</div></pre>
<p>[在此輸入影像說明](https://i.stack.imgur.com/RmWP2.png)</p>
<p>我嘗試調試，我將新坐標傳遞給 onDragMoved 方法，但在第二個事件中它們被更新為一些隨機坐標</p>
使用[cdkDragFreeDragPosition]屬性
HTML:
#TS:
#dragPosition = { x: 0, y: 0 }; onDragEnd(event: CdkDragMove) { this.dragPosition = { x: event.distance.x, y: event.distance.y + 100 } }