I end up using the following angular drag and drop plugin:
https://github.com/reppners/ngx-drag-drop

Here we can actually set the position of the draggable item relative to the cursor using the dndDragImageOffsetFunction property. For anyone interested below is a simple example that sets the cursor on the top left hand corner of the dragged item no matter which position the item is dragged from.

HTML

<div style="width:300px;height:50px;background-color:red"
[dndDraggable]="1"      
[dndDragImageOffsetFunction]="dragImageOffsetRight"
dndDragImageRef
>
 Drag Item
</div>

Component

dragImageOffsetRight:DndDragImageOffsetFunction = ( event:DragEvent, dragImage:Element ) => {
    return {
      x: 0,
      y: 0 
    };
  };

Note event:DragEvent will expose multiple properties like element offsetx y etc. So you can almost place the dragged item relative to the cursor almost anywhere

I am using Angular 8+ and working with HTML drag and drop feature. In short when I drag a div which have made draggable, I would like the mouse cursor to always be in the top left hand corner of the floating div being dragged no matter where I have dragged within the div. Below is a screens shot of where I would like the cursor to be.

Is this possible to do in Angular/Javascript? I have stackblitz link below:
https://stackblitz.com/edit/angular-envxg7?file=src/app/app.component.html

Many thanks in advance

<div draggable="true" style="width:300px;height:50px;background-color:red">
 Drag Item
</div>