Diagram DHTMLX Shape code to add "onDragOver"

Diagram
#1

I am new to DHTMLX Diagram and I want to add “onDragOver” to the shapes generated in Diagram DHTMLX.
Can someone help me how I can achieve this? Thanks

#2

Pleas,e try to use the ShapeHover event:
https://docs.dhtmlx.com/diagram/api__diagram_shapehover_event.html

#3

Hello @sematik, I need to know the drop event to make sure where he let’s go of the mouse click.
I tried adding in the DiagramEvents a “ShapeDrop” event and added the necessary function in the init_events

                        ondrop: html_1.eventHandler(function (ev) { return _this.locate(ev); }, {
			   			        dhx_diagram_item: function (ev, item) {
										_this.events.fire(types_1.DiagramEvents.shapeDrop, [item.id, ev]);
								},
								dhx_diagram_flow_item: function (ev, item) {
										_this.events.fire(types_1.DiagramEvents.shapeDrop, [item.id, ev]);
								},
								dhx_diagram_connector: function (ev, item) {
										_this.events.fire(types_1.DiagramEvents.shapeDrop, [item.id, ev]);
								}
						})

But this doesn’t work for some reason. Did I do something wrong?

#4

I solved it! What was missing is that diagram is not recognizing the “drag” events.
What I did was add handlers “onDragOver” and “onDrop” in my component.
After that I added the code I showed above and now it’s working.

Removing the “onDragOver” and “onDrop” handler in the container where the diagram is loaded results to the ondrop not working. I think this is because of the issue in onDrop where you need to implement onDragOver and stop propagation and prevent default.

handleDragOver = e => {
      e.stopPropagation();
      e.preventDefault();
};

handleDrop = e => {
      console.log("Dropped element will be handled in diagram.js");
};