ExternalObjectsDropped not firing when i drop external html elements

When i am trying to drag the html external element and drop ExternalObjectsDropped event is not firing… can any one help ?

below reference screenshot ,my requirement is to drap external nodes and drop on any of the exisitng node. so a new child node has to be created for that node

i am facing problem on identifying on which node external html is dropped , i tried to find the location like below .but my current node is always null.

html
image

javascript
this.div = document.getElementById(‘myDiagramDiv’);
this.div.addEventListener(‘dragover’, event => {
const can = event.target;
const pixelratio = window.devicePixelRatio;
if (!(can instanceof HTMLCanvasElement)) {
return;
}
let bbox = can.getBoundingClientRect();
let bbw = bbox.width;
if (bbw === 0) {
bbw = 0.001;
}
let bbh = bbox.height;
if (bbh === 0) {
bbh = 0.001;
}
const mx = event.clientX - bbox.left * (can.width / pixelratio / bbw);
const my = event.clientY - bbox.top * (can.height / pixelratio / bbh);
const point = this.myDiagram.transformViewToDoc(new go.Point(mx, my));
const curnode = this.myDiagram.findPartAt(point, true);
if (curnode instanceof go.Node) {
setTimeout(() => {
this.parent = ‘Low value of Market chains’;
this.name = ‘New Effect’;
this.type = ‘Effect’;
this.dir = ‘right’;
this.addNode();
}, 1000);
}
});

The ExternalObjectsDropped DiagramEvent is raised only for inter-Diagram drag-and-drops implemented by GoJS and its DraggingTool.

If you want to implement your own HTML or jQuery drag-and-drop, you can: