// <reference path="jquery-1.5.1-vsdoc.js" /> var SBS = SBS || {}; SBS.UI = SBS.UI || {}; SBS.UI.Views = SBS.UI.Views || {}; SBS.UI.Views.Plumb = { init: function () { jsPlumb.importDefaults({ // default drag options DragOptions: { cursor: 'pointer', zIndex: 2000 }, // default to blue at one end and green at the other EndpointStyles: [{ fillStyle: '#225588' }, { fillStyle: '#558822'}], // blue endpoints 7 px; green endpoints 11. Endpoints: [["Dot", { radius: 7}], ["Dot", { radius: 11}]], // the overlays to decorate each connection with. note that the label overlay uses a function to generate the label text; in this // case it returns the 'labelText' member that we set on each connection in the 'init' method below. ConnectionOverlays: [ ["Arrow", { location: 0.9}], ["Label", { location: 0.1, id: "label", cssClass: "aLabel" }] ] }); var connectorPaintStyle = { lineWidth: 5, strokeStyle: "#deea18", joinstyle: "round" }, // .. and this is the hover style. connectorHoverStyle = { lineWidth: 7, strokeStyle: "#2e2aF8" }; sourceEndpoint = { endpoint: "Dot", paintStyle: { fillStyle: "#225588", radius: 7 }, isSource: true, connector: ["Flowchart", { stub: 40}], connectorStyle: connectorPaintStyle, hoverPaintStyle: connectorHoverStyle, connectorHoverStyle: connectorHoverStyle }; targetEndpoint = { endpoint: "Rectangle", paintStyle: { fillStyle: "#558822", radius: 11 }, hoverPaintStyle: connectorHoverStyle, maxConnections: -1, dropOptions: { hoverClass: "hover", activeClass: "active" }, isTarget: true }; jsPlumb.bind("jsPlumbConnection", function (connInfo, originalEvent) { init(connInfo.connection); }); jsPlumb.bind("click", function (conn, originalEvent) { if (confirm("Delete connection from " + conn.sourceId + " to " + conn.targetId + "?")) jsPlumb.detach(conn); }); }, AddEndpoints: function (toId, sourceAnchors, targetAnchors) { var allSourceEndpoints = [], allTargetEndpoints = []; for (var i = 0; i < sourceAnchors.length; i++) { var sourceUUID = toId + sourceAnchors[i]; allSourceEndpoints.push(jsPlumb.addEndpoint(toId, sourceEndpoint, { anchor: sourceAnchors[i], uuid: sourceUUID })); } for (var j = 0; j < targetAnchors.length; j++) { var targetUUID = toId + targetAnchors[j]; allTargetEndpoints.push(jsPlumb.addEndpoint(toId, targetEndpoint, { anchor: targetAnchors[j], uuid: targetUUID })); } } } //Page load events $(document).ready( function () { //all JavaScript that needs to be call onPageLoad can be put here. SBS.UI.Views.Plumb.init(); } );
上边的代码是我写的一个调用jsplumb的js类。init函数里初始化了圆点和连接的样式。具体的我们可以查看它的api
我们主要看AddEndpoints 函数。它接收3个参数toId, sourceAnchors, targetAnchors。
toId就是我们要在哪个元素上加输入和输出的标记。sourceAnchors就是输出的点的集合，targetAnchors就是输入的点的集合。遍历这些点。并且调用jsplumb的方法
jsPlumb.addEndpoint()就可以把这几个点画到元素上去了。
基本的功能就完成了。但是我们新画出来的window还不能拖拽。我们要指定这几个window是可以拖拽的。
使用jquery里的draggable为其标记。并指定可以拖拽的范围（局限于我们的content容器）。如果想限制元素拖拽的范围，只需要设置它的containment属性。
$(".jq-draggable-incontainer").draggable({ containment: $( "#content" ).length ? "#content" : "document" });
现在这几个window可以拖拽了。并且可以使用箭头来连接。
刷新元素
我发现当我拖拽了window之后，那几个点是不跟着走的。查了api找到了一个函数。 jsPlumb.repaintEverything();就是重新画所有的东西。
我们可以把它放在droppable的drop事件的最后。
这个demo做的比较糙，因为也是初步调研阶段。比如用户拽了同一个window到右边2次。就会出现错误。因为id重复了。我们可以遍历id或者把已经创建的id存起来，来创建新的id。不过我做了一个偷懒的芳芳，也符合我本身的需求。就是一种类型的window只可以拽一次。第二次就不让用户拽了。Jquery提供了很好的实现。自动弹回去的功能。
在页面第一次加载时候，我先设置几个bool值到data里。当用户拽了一个window一次之后，就把那revert值设置为true。
$(function () { $('#tmpl1').data("revert", false); $('#tmpl2').data("revert", false); $('#tmpl3').data("revert", false); 。。。。}
case "1": if ($('#tmpl1').data("revert") == true) { $('#tmpl1').draggable({ revert: "valid" }); } else { $(this) .find("p") .append('<div><strong>1</strong><br /><br /></div><div></div>'); SBS.UI.Views.Plumb.AddEndpoints("window1", ["BottomCenter"], []); $('#tmpl1').data("revert", true); } break;