Angular CDK Drag Drop: Get X and Y position on dropped element with respect to its parent

Question

I am building an Angular app. I have bunch of dragable elements on left side and a dropzone on the right side. when I drag and drop the element into the dropzone. I need to know where exactly the element was dropped inside the dropzone.

I have tried using @angular/cdk/drag-drop package. looked at this Post

<div style="display: flex">
  <div class="example-container">
    <h2>To do</h2>
    <div class="example-list" cdkDropList>
      <div
        class="example-box"
        *ngFor="let item of todo"
        cdkDrag
        (cdkDragEnded)="onDragEnded($event)"
      >
        {{ item }}
      </div>
    </div>
  </div>

  <div class="drop-container">
    <h2>Done</h2>
    <div
      #dropZone
      class="dropzone"
      cdkDropList
      (cdkDropListDropped)="drop($event)"
    ></div>
  </div>
</div>

onDragEnded(event: CdkDragEnd) {
    debugger;
    let element = event.source.getRootElement();
    let boundingClientRect = element.getBoundingClientRect();
    let parentPosition = this.getPosition(element);

    console.log(
      'x: ' + (boundingClientRect.x - parentPosition.left),
      'y: ' + (boundingClientRect.y - parentPosition.top)
    );
  }

  getPosition(el: any) {
    let x = 0;
    let y = 0;
    while (el && !isNaN(el.offsetLeft) && !isNaN(el.offsetTop)) {
      x += el.offsetLeft - el.scrollLeft;
      y += el.offsetTop - el.scrollTop;
      el = el.offsetParent;
    }
    return { top: y, left: x };
  }

But this doesnt give me what I want.

score 0 · Answer 1 · answered Jul 05 '23 at 12:28

The cdkDropListDropped event has a dropPoint property with x and y coordinates:

<div (cdkDropListDropped)="onDrop($event)">...</div>

onDrop = (e: CdkDragDrop<T>) => {
  console.log(e.dropPoint);
}

Additionally, you can use the distance object in the event argument as well, which displays the distance in pixels from the dragging start point.

Angular CDK Drag Drop: Get X and Y position on dropped element with respect to its parent

1 Answers1