I am locating the offset position of mouse point when drag a div, suppose to be mouse.x-div.x is all I need, but the div.x is a large negative number(-15984). I am wondering why, and how to resolve the issue.
HTML:
<code>@for (comp of components; track comp) {
<div #componentContainer class="component-container" (cdkDragStarted)="beforeDrag($event)" cdkDrag cdkDropList [cdkDropListConnectedTo]="container">
<div class="component-wapper">
<div class="component-name"> {{comp.name}}</div>
<img class="component-avatar" src="{{comp.src}}" />
</div>
</div>
}
</code>
<code>@for (comp of components; track comp) {
<div #componentContainer class="component-container" (cdkDragStarted)="beforeDrag($event)" cdkDrag cdkDropList [cdkDropListConnectedTo]="container">
<div class="component-wapper">
<div class="component-name"> {{comp.name}}</div>
<img class="component-avatar" src="{{comp.src}}" />
</div>
</div>
}
</code>
@for (comp of components; track comp) {
<div #componentContainer class="component-container" (cdkDragStarted)="beforeDrag($event)" cdkDrag cdkDropList [cdkDropListConnectedTo]="container">
<div class="component-wapper">
<div class="component-name"> {{comp.name}}</div>
<img class="component-avatar" src="{{comp.src}}" />
</div>
</div>
}
Typescript:
<code>var rect = e.source.element.nativeElement.getBoundingClientRect();
console.log(rect.x)
</code>
<code>var rect = e.source.element.nativeElement.getBoundingClientRect();
console.log(rect.x)
</code>
var rect = e.source.element.nativeElement.getBoundingClientRect();
console.log(rect.x)