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:
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.
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:
These can give you some context to use when creating your dynamic values.