Community Edition 4.x Beta Release Community Edition 4.x Beta Release
20 Jun 2020
World Cup 2018, Part 2 World Cup 2018, Part 2
26 Jun 2018
World Cup 2018, Part 1 World Cup 2018, Part 1
25 Jun 2018
Community Edition 2.2.2 Release Community Edition 2.2.2 Release
20 Oct 2016
Connecting SVG Shapes (Raphael, Highcharts etc) (update) Connecting SVG Shapes (Raphael, Highcharts etc) (update)
20 Oct 2016
Writing a Layout Decorator Writing a Layout Decorator
25 Jul 2015
Toolkit Edition 1.0.0 Toolkit Edition 1.0.0
23 Jul 2015
Community Edition 1.7.6 Community Edition 1.7.6
23 Jul 2015
Connecting SVG Shapes (Raphael, Highcharts etc) Connecting SVG Shapes (Raphael, Highcharts etc)
22 Jul 2015
The beforeDrag Interceptor The beforeDrag Interceptor
15 Jan 2015
Integrating Jekyll and YUIDoc Integrating Jekyll and YUIDoc
28 Jan 2014
Dragging Multiple Elements Dragging Multiple Elements
17 Jan 2014
Custom Connectors Custom Connectors
22 Dec 2013

The beforeDrag Interceptor

Previous versions of jsPlumb allowed you to bind a function to beforeDrop and beforeDetach, which, upon returning
false, could abort the action. 1.7.3 takes that a step further and allows you to specify a function to call as the
user begins dragging a new connection. This function can do one of three things:

  • return false, aborting the drag
  • return true, allowing the drag to continue
  • return an Object, allowing the drag to continue and supplying the data backing the connection.

Returning False/True

The first two options are probably fairly obvious. A quick example:

jsPlumbInstance.bind("beforeDrag", function(params) {

  // params.source is the element from which the new connection is being dragged
  // params.endpoint is the associated endpoint
  return howeverTheWindBlows();

Here we've left it up to the universe to decide what to do. Note only boolean false will abort the drag. False-y
values such as 0 or null will not abort the drag.

Returning an Object

This may require some more explanation. Suppose you have defined some types in your jsPlumb configuration, and
they contain parameterized elements, such as the label for the overlay here:

jsPlumbInstance.registerConnectionType("someType", {
    [ "Label", { label:"${id}" } ]

Here we want the label to show the id parameter from the connection's data. Programmatically, you would make this


But up until 1.7.3, there was no way to supply this for Connections dragged by the mouse. That's what you can now do,
when you return an Object from a beforeDrag interceptor. Consider how the original example can be made to
supply "FOO" for the connection's label:

jsPlumbInstance.bind("beforeDrag", function(params) {
  return {

Of course it seems unlikely that you'd go to the trouble of supplying a beforeDrag interceptor and then return a static value. params
contains two pieces of information:

  • source - the element from which the new Connection is being dragged
  • endpoint - the associated Endpoint

These can give you some context to use when creating your dynamic values.