Dragover event when dragging existing nodes vs new nodes

[dtocci]

I would like to be able to detect when one existing node is dragged to overlap another by listening for the "dragover" event, but I can't seem to get them to trigger when dragging existing nodes.

Essentially my goal is to automatically create connections when one node is dragged close to another. I have it working for new nodes, using some CSS to create large transparent borders around the outputs, I am able to listen to dragover events on those outputs and store an identifier, so that when the new node is dropped the connection can be created. But dragover listeners are only triggered by new nodes before they are dropped for the first time. When I drag around any existing node, dragover events are not fired.

Here's a simplified fiddle just showing the dragover events: https://jsfiddle.net/49vtjpmn/

Try dragging any new node onto the existing AWS node and you'll see the dragover event fire in the console. I've also added a red border around the existing node as an indicator. New nodes receive the dragover event listener too, so after you place a new node, that too will highlight with a red border when any new node is dragged over it. However, dragging any existing node over another existing node does not trigger the dragover event listeners. I've tried adding the same attributes that the new nodes have (draggable, data-node, etc) to existing nodes but it makes no difference. I'm not sure why. Is it possibly because of the .parent-node wrapper?

I'm able to achieve something similar to what I want using collision detection on mouseMove, but it's sluggish due to the constant calculations. Dragover works efficiently, but only for new nodes. Any ideas?

I'm loving this project! Thank you for all your hard work.

[jerosoler]

View this comment:

• https://github.com/jerosoler/Drawflow/issues/423#issuecomment-1131533142

Ussing elementsFromPoint https://developer.mozilla.org/en-US/docs/Web/API/Document/elementsFromPoint

Thanks! ;)

[dtocci]

Thank you for the fast reply!

This looks good in the video but unfortunately this is essentially what I was already able to achieve with collision detection, except when using collision detection I can detect any part of the overlapping rectangle. It also relies on mouseMove + position, which is very heavy and makes everything sluggish. If possible it would be great to rely on dragover events so that everything stays buttery smooth like every other aspect of drawflow.

Also, in your example, this overlap should trigger the area on the righthand side to highlight in this screenshit, but it doesn't because it is detecting based on a point, and not based on the overlap of the rectangle like a dragover or collision detection would.

Do you know of a way I can get the dragover events to fire when an existing node is dragged around? I'm not sure what exactly is different about dragging a new node around compared to one that has already been placed. But as you can see in the fiddle the former triggers the dragovers and the latter doesn't.

[jerosoler]

In its day I tried to simulate the drag event without success.

• https://github.com/jerosoler/Drawflow/issues/360#issuecomment-1041230729

Another option that I have tried is to detect collisions. If all its nodes are square or rectangular with this formula works. https://developer.mozilla.org/en-US/docs/Games/Techniques/2D_collision_detection