Arrow icon
See all demos

Port Reordering Tool

Need to support user interactions that are not part of JointJS? For example, allowing users to drag and drop ports and change their order? This can be accomplished using the custom element tool, as we have done in this demo.
Demo instructions
Connect the output and input ports of the elements and drag them to change their order.
Port Reordering Tool

See the Pen JointJS: Port Reordering Tool by JointJS (@jointjs) on CodePen.

Made with JointJS+

Only available with the JointJS+ commercial license in the apps/ directory of your package. Don't have a license yet? Start a trial and use the source code of all our demos for free, with no strings attached, for 30 days.

Made with JointJS

Available in the JointJS open-source library which helps developers create simple visual applications in less time.

Speed up your development with a powerful library

Leverage a time-tested JavaScript diagramming library using the best of HTML5 and SVG to accelerate your development.