Stack Overflow
Stack Overflow

Questions tagged [jsplumb]

jsPlumb provides a way to "plumb" elements of a UI together.

jsPlumb is javascript library that allows you to connect elements on the screen using SVG, Canvas or VML, depending on the capabilities of the browser. It can be used with jQuery, MooTools or YUI3 (or another library of your choice if you feel like implementing an adapter for it).

Useful links

Related tags

566 questions
5
votes
4 answers

Extend jsplumb.draggable drag behavior

I am sure that I am missing something here, but I would like to extend the drag behavior of a div with jsPlumb.draggable class attributes that is attached to an endpoint, while preserving the jsPlumb.draggable attributes. I would like something…
Jim Crozier
  • 1,378
  • 2
  • 16
  • 28
5
votes
1 answer

jsplumb animate connector lines

I have created a very simple set up with jsplumb that displays a top element and then connects that element to six others on the screen. I am wondering if it is possible to animate the connector lines so that they appear to grow from the top element…
Phil James
  • 113
  • 1
  • 10
5
votes
2 answers

Using jsPlumbs, redraw the lines when resizing the window?

I'm struggling with jsplumbs just to do a simple thing. I'm just connecting divs with a single straight line, so how can i redraw the lines when resizing the window? So it always follows the center of the divs. Can i use z-index to put the line…
mrbangybang
  • 683
  • 1
  • 9
  • 22
5
votes
2 answers

Javascript Library to dynamically create graphs?

Here is my requirement: I need to create a visualization of links between different representations of a person. The image below I think indicates that fairly clearly. Additionally, those rectangles would also contain some data about that…
AHungerArtist
  • 9,332
  • 17
  • 73
  • 109
4
votes
1 answer

Connecting jQuery UI dialogs with a line using JsPlumb

I am using jQuery plugin called jsPlumb - http://jsplumb.org/jquery/demo.html and I want to connect my jQuery UI Dialogs with lines generated by jsPlumb. But I cant figure out way to do it. I have this source:
Tuhle neco…
Pirozek
  • 1,250
  • 4
  • 16
  • 25
4
votes
1 answer

JSPLUMB: disable nodes drag and drop after a specific user interaction

I'm using the community edition of jsplumb (version 2.15.5) within a React project. // Outside the component plumb = jsPlumb.getInstance(mySetting); ... useEffect(() => { // Handle endpoints // Handle connections …
lucataglia
  • 728
  • 5
  • 18
4
votes
2 answers

JsPlumb How to change connection style from default to dashed?

Usually, the default paint style can be initialized in the ready method of jsPlumb. The connector line style is solid, but in some cases, the user hope to change it to dashed style. Firstly, the solid one is created and render on page, and then the…
Bes Ley
  • 1,685
  • 1
  • 20
  • 39
4
votes
3 answers

Set Container Element of a jsPlumb Line

I have two small green divs within my canvas. It can be drag within the canvas with an id myid_templates_editor_canvas, with the use of the code below: myid_templates_editor_make_draggable('div1'); myid_templates_editor_make_draggable('div2'); //…
user4621642
4
votes
0 answers

How to fix Uncaught RangeError: Maximum call stack size exceeded jsplumb Error on Javascript application

currently I'm trying to implement a javascript application which uses jsplumb plugin too. In the bottom of page, I gave the versions of jquery-ui and jquery.js. In some part of it, I've following function : jsPlumb.bind("dblclick", function(c) { …
zwlayer
  • 1,752
  • 1
  • 18
  • 41
4
votes
1 answer

JSPlumb show connection label on hover

I'm using JSPlumb to connect a bunch of blocks and I am able to set a label for a connection using: JSPLUMB_INSTANCE.bind("connection", function (info) { info.connection.getOverlay("label").setLabel("w="+width+"
p="+pipelining); }); This way…
mohsaied
  • 2,066
  • 1
  • 14
  • 25
4
votes
3 answers

jsPlumb: dragging new connection should remove existing one

Using jsPlumb, I managed to have the following setup: There are multiple nodes acting like nodes in a special type of flowchart. Each node has one single target where connections can be dropped onto. Every node has zero, one or more exits. Each…
Atmocreations
  • 9,923
  • 15
  • 67
  • 102
4
votes
2 answers

jsPlumb: Large endpoint to make touch easier

My implementation has two lists of elements and you basically connect items from the list on the left to items from the list on the right. We have set the endpoints to be transparent so on the desktop it looks like you just drag from elements on one…
Ian1971
  • 3,666
  • 7
  • 33
  • 61
4
votes
2 answers

Jsplumb add connection programmatically using endpoints

My requirement is like, I am adding two endpoints using jsplumb.addEndPoint for two containers named 'container0' and 'container1'. Now I need to link the two end points using a connector programmatically but the jsplumb.connect creates a new…
user1994513
  • 31
  • 1
  • 5
4
votes
4 answers

jsPlumb: delete a draggable element

I have a “canvas” where I allow the user to add draggable boxes and connect them with jsPlumb. I want to let them delete one of those boxes at some point in time. To handle that, I first detach all connections and remove endpoints from the target…
Arnold
  • 2,390
  • 1
  • 26
  • 45
4
votes
1 answer

Unable to create straight line connection in JSPlumb

I'm trying to create a straight line connection in JSPlumb between two endpoints. When I try to connect to the endpoint, the source point is dragged instead of creating a straight line connection. Here the…
checkmate711
  • 3,301
  • 2
  • 35
  • 45
1 2
3
…
37 38