How to set position of dragged image

[nvernooy]

I'm using the dndHandle element in the far right of my dndDraggable element, then when I start dragging the dragged image jumps so that the left side is under the cursor, not the right side that was originally clicked. This can be disorienting to be user, is there a way to fix the position of the dragged image?

[reppners]

Hi, sorry for the long delay. There is a way to customize the drag image offset.

The dndDraggable has an input dndDragImageOffsetFunction which expects a function with signature ( event:DragEvent, dragImage:Element ) => { x:number, y:number };

This is the default implementation

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
  };
}

I'll incorporate an example in the demo in a future release.

[reppners]

I've just updated the simple demo with a very naive approach that should get you started. Hope it helps :)

[nvernooy]

Thanks thats great!