---
source: https://www.jointjs.com/demos/connecting-nodes-by-dragging-and-dropping
github: https://raw.githubusercontent.com/clientIO/joint-demos/main/connecting-nodes-by-dragging-and-dropping/README.md
generated: 2026-03-28
format: plaintext
---

JointJS+: Connecting nodes by dragging and dropping <a href="https://www.jointjs.com/jointjs-plus"><img src="../jointjs-plus-badge.svg" alt="JointJS+" width="123" align="right" /></a>

Have you ever wondered how to create a new connection when the user drags one element over another, or over a link that connects two elements with enough space between them? Or how to automatically place a new element next to the destination element and let the user choose the direction in which to place it? Check out this demo to see how you can achieve both scenarios, using SVG previews to help the user understand the impact of each drop action.

This demo is also available online at jointjs.com.

Available Versions

JavaScript

Screenshot

!screenshot