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", {
  overlays:[
    [ "Label", { label:"${id}" } ]
  ]
});

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

jsPlumbInstance.connect({
  source:"someElementId",
  target:"someOtherElementId",
  type:"someType",
  data:{
    id:"FOO"
  }
});

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 {
    id:"FOO"
  }  
});

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.