Define custom dndDragImageElementRef by code

[ReactionCode]

I don't really know if my request is actuall possible, at least I can not achieve it with the actual version 1.1.0.

As far I know If I want to change the drag image I have to set the dndDragImageElementRef on any child element of a dragZone.

DRAG_IMAGE

The handicap appears when I want to set dndDragImageElementRef by code, to an element that is hidden to HTML, the drag image would be hidden too.

A solutions would be add a [dndDragImageRef]="draggable.dragImage as HTML attribute on DragZone, so on each drag start the drag image would be changed,

<div [dndDraggable]="draggable.data" [dndDragImageRef]="draggable.dragImage [dndEffectAllowed]="draggable.effectAllowed" [dndDisableIf]="draggable.disable (dndStart)="onDragStart($event)" (dndCopied)="onDraggableCopied($event)" (dndLinked)="onDraggableLinked($event)" (dndMoved)="onDraggableMoved($event)" (dndCanceled)="onDragCanceled($event)" (dndEnd)="onDragEnd($event)">

An example to this, would be the next screenshot https://pasteboard.co/I4lL16o.png

Other example https://material.angular.io/cdk/drag-drop/overview#customizing-the-drag-preview

If it's possible to achieve it, I would gratefull some advices.

Best regards. Javier.

[reppners]

Hi, thanks for your request. This is possible to implement.

To clarify:

• You want to be able to set a drag image by passing a reference to an html element to the draggable directive
• The element is possibly created in code and may not attached to the DOM

Is that correct?

[ReactionCode]

It's correct!!

[zaidas1m]

Is the request implemented? I have an issue when the drag zone is under other container because imageDrag generated gets DOM element from the container is over. Is there a way to avoid this? Maybe sending the dragImage by param?