I have a tree structure in UI in angularjs, and I am trying to drag a subtree from one parent node to another parent node. During this operation I need drag image to be of the entire subtree being dragged, however since the drag is actually on the node, it just shows the image of the node and not entire subtree. To solve this I tried to set the drag image as the container div which contains the entire subtree. However with this, it just sets the last element as drag image.

$scope.dragTreeNode = function(event,dragNode) {  
    let element = event.target.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement;
                
    var dummyElement = document.createElement('DIV');
    dummyElement.id = 'draggedElement';
    let cloned = element.cloneNode(true);
    dummyElement.appendChild(cloned);
    document.body.appendChild(dummyElement);
    cloned.classList.add('ghosted');
    console.log(cloned);
    event.dataTransfer.setDragImage(dummyElement, 0, 0);

}

starting drag for this node

Drag image set to last element of tree