Try this: http://jsfiddle.net/GT884/1/
;(function () {
window.jsPlumbDemo = {
init: function () {
jsPlumb.importDefaults({
DragOptions: {
cursor: "pointer",
zIndex: 2000
},
HoverClass: "connector-hover"
});
var connectorStrokeColor = "rgba(50, 50, 200, 1)",
connectorHighlightStrokeColor = "rgba(180, 180, 200, 1)",
hoverPaintStyle = {
strokeStyle: "#7ec3d9"
};
var connection1 = jsPlumb.connect({
source: "start",
target: "msgtype",
connector: "Bezier",
cssClass: "c1",
endpoint: "Blank",
endpointClass: "c1Endpoint",
anchors: ["BottomCenter", [0.75, 0, 0, -1]],
paintStyle: {
lineWidth: 6,
strokeStyle: "#a7b04b",
outlineWidth: 1,
outlineColor: "#666"
},
endpointStyle: {
fillStyle: "#a7b04b"
},
hoverPaintStyle: hoverPaintStyle
});
// make all .window divs draggable
jsPlumb.draggable(jsPlumb.getSelector(".window"));
}
};
})();
jsPlumb.bind("ready", function () {
jsPlumb.init();
// chrome fix.
document.onselectstart = function () {
return false;
};
// render mode
var resetRenderMode = function (desiredMode) {
var newMode = jsPlumb.setRenderMode(desiredMode);
$(".rmode").removeClass("selected");
$(".rmode[mode='" + newMode + "']").addClass("selected");
$(".rmode[mode='canvas']").attr("disabled", !jsPlumb.isCanvasAvailable());
$(".rmode[mode='svg']").attr("disabled", !jsPlumb.isSVGAvailable());
$(".rmode[mode='vml']").attr("disabled", !jsPlumb.isVMLAvailable());
//var disableList = (newMode === jsPlumb.VML) ? ",.rmode[mode='svg']" : ".rmode[mode='vml']";
// $(disableList).attr("disabled", true);
jsPlumbDemo.init();
};
$(".rmode").bind("click", function () {
var desiredMode = $(this).attr("mode");
if (jsPlumbDemo.reset) jsPlumbDemo.reset();
jsPlumb.reset();
resetRenderMode(desiredMode);
});
// explanation div is draggable
$("#explanation,.renderMode").draggable();
resetRenderMode(jsPlumb.SVG);
});