Solution 1 :

I end up using the following angular drag and drop plugin:

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.


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


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

Problem :

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:

Many thanks in advance


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


Comment posted by this

Hi! This is possible in angular but it’s slightly messy(opinion….), long story short: In plain JS/Jquery you could achieve that with something like

Comment posted by Lucho

unless there is a more fancy hacky way to do it with plainJS then it’s probably “easily” done in Angular aswell

Comment posted by Ka Tech

Thanks for the tils. To be honest I don’t completely how cloning node solution works hopefully there’s some information out there i can find to figure this out