For Firefox browser dragged data shows unexpected effect.

[PankhilJain1423]

I'm using this package in my project and it works fine for Edge, Chrome and also working fine with Firefox. In all three browsers I'm able to drag and drop data properly.

But only in FireFox when I click on any text to drag it, it's image is created very below from where a data is selected.

If my point is not clear I'm attaching image in which it will be very much clear about the issue.

As we can see from image that there are 3 blocks 1) Statement (2) nextSteps and (3) Drag to Insert

when I click data from Drag to Insert section and drop in any of the two section above, it works fine, but as you can see in image that when I select it shows it's image very low marked with red.

And this is only happening in Firefox not in other browsers.

Can anybody please help me in resolving this issue.

Thank you.

[reppners]

Most likely a css issue. Do you have a code sample or small reproduction to look at? The default function for calculating the drag image offset is as follows:

export function calculateDragImageOffset( event:DragEvent, dragImage:Element ):{ x:number, y:number } {

  const dragImageComputedStyle = window.getComputedStyle( dragImage );
  const paddingTop = parseFloat( dragImageComputedStyle.paddingTop ) || 0;
  const paddingLeft = parseFloat( dragImageComputedStyle.paddingLeft ) || 0;
  const borderTop = parseFloat( dragImageComputedStyle.borderTopWidth ) || 0;
  const borderLeft = parseFloat( dragImageComputedStyle.borderLeftWidth ) || 0;

  return {
    x: event.offsetX + paddingLeft + borderLeft,
    y: event.offsetY + paddingTop + borderTop
  };
}

This might give you a lead to find the causing styles. It is possible to set a custom function on the dndDraggable with the input dndDragImageOffsetFunction.

[reppners]

Closing because of inactivity and not solvable on library level in a generic way.