Draggable Connections Examples

A note on dragOptions and dropOptions

dragOptions

There are two methods in jsPlumb that allow you to configure an element from which Connections can be dragged - addEndpoint and makeSource. Each of these methods supports a dragOptions object is one of the parameters in its options. The allowed values in this object vary depending on the drag library in use: if you are using vanilla jsPlumb then the drag library is https://github.com/jsplumb/katavorio; otherwise with the jQuery flavour it is jQuery UI. dragOptions is passed directly through to the underlying library; check the docs for each of these to find out what options are available to you.

dropOptions

There are two methods that allow you to configure an element as a Connection drop target - addEndpoint and makeTarget. Where the source methods support dragOptions, these methods (and yes, one of these methods is the same as a method you'd use to configure a Connection source), these methods support a dropOptions parameter. Again, check the appropriate documentation for details on supported values in this object.

Examples

This is a list of examples of how to use jsPlumb to create Connections using drag and drop. The basic procedure is:

1. Create Endpoints and register them on elements in your UI, or create a source Endpoint and then make some element a drop target
2. Drag and Drop
   

There are plenty of options you can set when doing this...it will be easier to show you some examples:

• Define an Endpoint with default appearance, that is both a source and target of new Connections:

var endpointOptions = { isSource:true, isTarget:true }; 

• Register that Endpoint on window3, specifying that it should be located in the top center of the element:

var window3Endpoint = jsPlumb.addEndpoint('window3', { anchor:"Top" }, endpointOptions );  

Notice here the usage of the three-argument addEndpoint - we can reuse endpointOptions with a different Anchor for another element. This is a useful practice to get into.

• Register that Endpoint on window4, specifying that it should be located in the bottom center of the element:

var window4Endpoint = jsPlumb.addEndpoint('window4', { anchor:"BottomCenter" }, endpointOptions );  

Now we have two Endpoints, both of which support drag and drop of new Connections. We can use these to make a programmatic Connection, too, though:

• Connect window3 to window4 with a 25px wide yellow Bezier that has a 'curviness' of 175:

jsPlumb.connect({ 
  source:window3Endpoint,
  target:window4Endpoint,
  connector: [ "Bezier", { curviness:175 } ],
  paintStyle:{ lineWidth:25, strokeStyle:'yellow' }
});  

• Define an Endpoint that creates Connections that are 20px wide straight lines, that is both a source and target of new Connections, and that has a scope of blueline. Also, this Endpoint mandates that once it is full, Connections can no longer be dragged from it (even if reattach is specified on a Connection):

var endpointOptions = { 
      isSource:true, 
      isTarget:true,
      connector : "Straight",
      connectorStyle: { lineWidth:20, strokeStyle:'blue' },
      scope:"blueline",
      dragAllowedWhenFull:false  
}; 

• Define an Endpoint that will be anchored to TopCenter. It creates Connections that are 20px wide straight lines, that are both a source and target of new Connections, and that have a scope of blueline. Also, this Endpoint mandates that once it is full, Connections can no longer be dragged from it (even if reattach is specified on a Connection):

var endpointOptions = {
      anchor:"Top", 
      isSource:true, 
      isTarget:true,
      connector : "Straight",
      connectorStyle: { lineWidth:20, strokeStyle:'blue' },
      scope:"blueline",
      dragAllowedWhenFull:false  
}; 

• Define an Endpoint that will create a dynamic anchor which can be positioned at Top or Bottom. It creates Connections that are 20px wide straight lines, it is both a source and target of new Connections, and it has a 'scope' of 'blueline'. Also, this Endpoint mandates that once it is full, Connections can no longer be dragged from it (even if reattach is specified on a Connection):

var endpointOptions = {
    anchor:[ "TopCenter", "BottomCenter" ], 
      isSource:true, 
      isTarget:true,
      connector : "Straight",
      connectorStyle: { lineWidth:20, strokeStyle:'blue' },
      scope:"blueline",
      dragAllowedWhenFull:false  
}; 

• Exactly the same as before, but shows how you can use anchors instead of anchor, if that makes you feel happier:

var endpointOptions = {
  anchors:[ "TopCenter", "BottomCenter" ], 
  isSource:true, 
  isTarget:true,
  connector : "Straight",
  connectorStyle: { lineWidth:20, strokeStyle:'blue' },
  scope:"blueline",
  dragAllowedWhenFull:false  
}; 

• Define an Endpoint that is a 30px blue dot, creates Connections that are 20px wide straight lines, is both a source and target of new Connections, has a scope of blueline, and has an event handler that pops up an alert on drop:

var endpointOptions = { 
  isSource:true, 
  isTarget:true,
  endpoint: [ "Dot", { radius:30 } ],
  style:{fillStyle:'blue'},
  connector : "Straight",
  connectorStyle: { lineWidth:20, strokeStyle:'blue' },
  scope:"blueline",
  dropOptions:{ 
    drop:function(e, ui) { 
      alert('drop!'); 
    } 
  }  
}; 

• Same example again, but maxConnections being set to -1 means that the Endpoint has no maximum limit of Connections:

var endpointOptions = { 
    isSource:true, 
    isTarget:true,
    endpoint: [ "Dot", {radius:30} ],
    style:{ fillStyle:'blue' },
    maxConnections:-1,
    connector : "Straight",
    connectorStyle: { lineWidth:20, strokeStyle:'blue' },
    scope:"blueline",
    dropOptions:{ 
          drop:function(e, ui) { 
            alert('drop!'); 
          } 
      }  
}; 

• Assign a UUID to the Endpoint options created above, and add as Endpoints to "window1" and "window2":

jsPlumb.addEndpoint("window1", { uuid:"abcdefg" }, endpointOptions );
jsPlumb.addEndpoint("window2", { uuid:"hijklmn" }, endpointOptions );

• Connect the two Endpoints we just registered on "window1" and "window2":

jsPlumb.connect({uuids:["abcdefg", "hijklmn"]});

• Create a source Endpoint, register it on some element, then make some other element a Connection target:

var sourceEndpoint = { isSource:true, endpoint:[ "Dot", { radius:50 } ] };
var targetEndpoint = { endpoint:[ "Rectangle", { width:10, height:10 } ] };
jsPlumb.addEndpoint( "window1", sourceEndpoint );
jsPlumb.makeTarget( "window2", targetEndpoint );

Notice that the endpoint definition we use on the target window does not include the isTarget:true directive. jsPlumb ignores that flag when creating a Connection using an element as the target; but if you then tried to drag another connection to the Endpoint that was created, you would not be able to. To permit that, you would set isTarget:true on the targetEndpoint options defined above.