Foblex Flow
Remove Connection on Drop
Description
This example shows how to remove a connection as part of a drag-and-drop interaction. Instead of forcing users to open a context menu or click a separate delete control, the editor can treat a drop on an invalid area or removal target as a delete action for that edge.
That pattern is useful in workflow builders and graph UIs where users edit connections frequently. It keeps edge cleanup fast and makes graph editing feel more direct.
The key is clear feedback: users should understand when they are reassigning a connection, when they are canceling a drag, and when they are actually deleting an edge.
Example
[example.html] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/libs/f-examples/connections/remove-connection-on-drop/example.html [example.ts] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/libs/f-examples/connections/remove-connection-on-drop/example.ts [example.scss] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/libs/f-examples/connections/remove-connection-on-drop/example.scss
What this solves
- Faster edge cleanup for iterative graph editing.
- A clearer deletion flow for connection-heavy interfaces.
- Better UX when users frequently rewire or simplify diagrams.
This example is a practical companion to edge creation and reassignment patterns.