Endpoints

So far we have created new connections programmatically. What if the users wanted to add connections on their own by drag and drop? For this jsPlumb provides the concept of endpoints. Endpoints can not only be shown on connections, but also on elements.

Add endpoints to items

The following example shows, how to add an endpoint to the element “item_left”, with the addEndpoint-method. The endpoint is shown on the right side, but has no functionality assigned.

Example

jsPlumb.addEndpoint("item_left", {
	anchors:["Right"]
});

Play with example »

Drag and drop connections

If we want to allow the user to create new connections between items, we need to set the isSource- and isTarget parameter on the endpoints to true. The following example shows you, how you can pass this as default-value to the addEndpoint-method.

Example

var common = {
	isSource:true,
	isTarget:true,
	connector: ["Straight"]
};

jsPlumb.addEndpoint("item_left", {
	anchors:["Right"]
}, common);

Play with example »

Styling the endpoint

jsPlumb knows to different ways to style elements. Through paintstyles and css-classes. The following example uses paintstyles to style the endpoint and the connectors (lines). Beside the normal style we set a style for hover as well. Cool, huh?

Why do we style connectors here as well? Because we want connections leaving from the endpoint having a specific style as well.

Example

jsPlumb.addEndpoint("item_left", {
	/* Endpoint-Position */
	anchor:"Right",

	/* Endpoint-Style */
	endpoint:"Rectangle",
	paintStyle:{ fill:"white", outlineStroke:"blue", strokeWidth:3 },
	hoverPaintStyle:{ outlineStroke:"lightblue" },

	/* Connector(Line)-Style */
	connectorStyle:{ outlineStroke:"green", strokeWidth:1 },
	connectorHoverStyle:{ strokeWidth:2 }

}, common);

Play with example »

The last example used a rectangle for the endpoint. The full list which you can choose of is:

  • Dot –
  • Rectangle
  • Image
  • Blank

I’m currently working on the next part of the tutorial, stay tuned!