---
source: https://www.jointjs.com/demos/port-drag-drop
github: https://raw.githubusercontent.com/clientIO/joint-demos/main/port-drag-drop/README.md
generated: 2026-03-21
format: plaintext
---

JointJS+: Port Drag & Drop <a href="https://www.jointjs.com/jointjs-plus"><img src="../jointjs-plus-badge.svg" alt="JointJS+" width="123" align="right" /></a>

Do you want to list ports in your stencil and let the user drag and drop them into the elements? Do you want the user to be able to edit the position of the ports in the element later? Or remove a port with a double click? Check out this demo.

This demo is also available online at jointjs.com.

Available Versions

JavaScript

Screenshot

!screenshot