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 курсора мыши при отпускании элемента и добавляем 100
const element = event.source.element.nativeElement;
element.style.transform = `translate3d(0, ${y}px, 0)`; // устанавливаем новую позицию элемента с помощью CSS-трансформации
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 (cdkDragMoved)="onDragMoved($event)" (cdkDragStarted)="onDragStart($event)" (cdkDragEnded)="onDragEnd($event)">
Координаты: {{ posX }}, {{ posY }}
</div></pre>
<p>[在此处输入图像描述](https://i.stack.imgur.com/RmWP2.png)</p>
<p>我尝试调试，我将新坐标传递给 onDragMoved 方法，但在第二个事件中它们被更新为一些随机坐标</p>
使用[cdkDragFreeDragPosition]属性
HTML:
<div class="example-box" cdkDragLockAxis="y" cdkDrag [cdkDragFreeDragPosition]="dragPosition" (cdkDragEnded)="onDragEnd($event)"> Координаты: {{ posX }}, {{ posY }} </div>TS:
dragPosition = { x: 0, y: 0 }; onDragEnd(event: CdkDragMove) { this.dragPosition = { x: event.distance.x, y: event.distance.y + 100 } }