CODEWITHSUNDEEP
angular
ps0604
ps0604

Reputation: 1071

Get div coordinates in drag and drop

In this StackBlitz I have a div with a mwlDraggable directive (see angular-draggable-droppable library).

The drag moves fine, but I need to know the top/left coordinates of the div when I drop it in another div. The drop event gives me the x/y coordinates of the mouse pointer, but not of the div. Any ideas how to achieve this? I'm also open to use other dragging libraries.

<div 
    mwlDraggable 
    [ghostDragEnabled]="true"
    [ghostElementTemplate]="ghostTemplate">
    Drag me!
</div>


<ng-template #ghostTemplate>
    <div style="width:50px;height:50px;border:2px dashed black"></div>
</ng-template>

Upvotes: 0

Views: 1895

Answers (1)

yurzui
yurzui

Reputation: 214085

In order to get coordinates of ghost element when it is being dropped I would listen to dragEnd event and make use of @ViewChild Angular decorator:

template.html

<div 
    mwlDraggable 
    [ghostDragEnabled]="true"
    [ghostElementTemplate]="ghostTemplate"
    (dragEnd)="dragEnd($event)"  <==================== add this
    >
    Drag me!
</div>

<ng-template #ghostTemplate>
    <div #ghostEl ...></div>
         ^^^^^^^^
         and this
</ng-template>

component.ts

@ViewChild('ghostEl') ghostEl: ElementRef<any>;

dragEnd(event) {
  const droppedElement = this.ghostEl.nativeElement.parentNode;
  const { top, left } = droppedElement.getBoundingClientRect();
  console.log(top, left);
}

Forked Stackblitz

Upvotes: 2

Related Questions