How to get coordinates of image relative to another image after drag and drop (Angular, Typescript, HTML)

I have a map placed as an image and many beacons (as well, as images) located on the map. I use the property cdkDrag to drag the beacons on the map but when I release it, I can not get the beacon's new coordinates on the current map.

The first solution I could think of was calculating the new coordinates with a formula. I presumed I knew 3 points:

• point A: the current coordinates of the beacon, before movement, on the map
• point C: the initial client coordinates (obtained when I start dragging the beacon)
• point D: the final client coordinates (obtained when I released the beacon)

I calculate point B presuming the 4 points form a parallelogram.

Point M is the intersection of the parallelogram ABDC.

So, point M is in the middle of [AD] and in the middle of [BC].

xM = (xA + xD) / 2

yM = (yA + yD) / 2

xM = (xB + xC) / 2

yM = (yB + yC) / 2

xB = xA + xD - xC

yB = yA + yD - yC

I thought the coordinates of B might be correct but it seems something is missing. When I tested it out, the final point of the beacon is moved in the same direction, with double the length.

Picture 1. Map and 1 beacon. Initial position.

Picture 2. While moving beacon.

Picture 3. After releasing the beacon in the position of picture 2.

HTML code segment:

<div class="row" *ngIf="editMode">
                <div class="col-xs-12">
                    <img
                        src="/assets/images/blue_beacon.png"
                        id="newMarker"
                        width="30px"
                        height="40px"
                        style="display: none; position: absolute;"
                        #newMarker/>
                    <div *ngFor="let beacon of this.mapForm.value['_beacons']">
                        <img *ngIf="beacon['_y'] !== '' && beacon['_x'] !== ''"
                            [src]="editedBeacon !== null && editedBeacon['_macAddress'] === beacon['_macAddress'] ? '/assets/images/blue_beacon.png' : '/assets/images/red_beacon.png'"
                            width="30px"
                            height="40px"
                            [ngStyle]="{
                                'top.px': beacon['_y'],
                                'left.px': beacon['_x']
                            }"
                            [alt]="beacon['_y']"
                            style="display: block; position: absolute;"
                            (mouseup)="releasedMarker($event, beacon)"
                            (mousedown)="initialClickMarker($event, beacon)" 
                            cdkDrag/>
                    </div>
                    <img
                        [src]="_imagePath.value"
                        style="width: auto; height: auto; min-width: auto; min-height: auto; max-width: auto; max-height: auto;">
                </div>
            </div>

TS code segment:

clientCoordinatesC: [number, number] = [0, 0];

releasedMarker(event, beacon) {
    console.log("entered releasedMarker");
    //console.log(beacon['_x'], beacon['_y']);
    // Ax = beacon['_x'], Ay = beacon['_y']
    // Bx = coordinatesBeacon[0], By = coordinatesBeacon[1]
    let clientCoordinatesD: [number, number] = [event.clientX, event.clientY];
    let coordinatesBeacon: [number, number] = [0, 0];
    let midPointCoordinatesAD: [number, number] = [(beacon['_x'] + clientCoordinatesD[0])/2, (beacon['_y'] + clientCoordinatesD[1])/2];
    coordinatesBeacon[0] = beacon['_x'] + clientCoordinatesD[0] - this.clientCoordinatesC[0];
    coordinatesBeacon[1] = beacon['_y'] + clientCoordinatesD[1] - this.clientCoordinatesC[1];
    this.newCoordinates = coordinatesBeacon;
    //console.log(this.newCoordinates[0], this.newCoordinates[1]);
    beacon['_x'] = this.newCoordinates[0];
    beacon['_y'] = this.newCoordinates[1];
    //this.editedBeacon = beacon;
    console.log(event.clientX);
    console.log(event.clientY);
  }

  initialClickMarker(event, beacon) {
    console.log("entered initialClickMarker");
    this.clientCoordinatesC = [event.clientX, event.clientY];
    console.log(beacon['_x'], beacon['_y']);
    //this.editedBeacon = beacon;
    //this.newCoordinates = [beacon['_x'], beacon['_y']];
  }

Thank you and please contact me if you need further information.