Question

我正在尝试使用jsPlumb 1.3.16执行以下操作。 1.将端点添加到两个div 2.以编程方式创建连接（见下文）。

我遇到的问题是连接似乎创建了自己的端点，现在它们隐藏了原始端点。因此，我无法再从这些端点创建任何连接。这似乎是一个z指数问题。

任何人都可以帮忙吗？

var connectorOptions = {    
    uniqueEndpoint:false,       
    maxConnections:-1,
    newConnection:true,     
    endpoint: ["Rectangle", {
        width: 15,
        height: 15
    }],
    endpointStyle: {
        fillStyle: "rgba(255,255,255,50)", 
        outlineColor: "#ccc", 
        outlineWidth: 1
    },
    setDragAllowedWhenFull: true,
    connector: ["Straight"],
    paintStyle: {
        strokeStyle: "#ec51bb", 
        lineWidth: 4
    },
    connectorStyle: {
        lineWidth: 4,
        fillStyle: "#ec51bb"
    },
    overlays: [
        ["Arrow", {
            width: 14,
            length: 14,
            foldback: 1,
            location: 1,
            id: "arrow"
        }]
    ]
};



var endpointOptions = {
    maxConnections:-1, 
    uniqueEndpoint:false,
    isSource:true, 
    isTarget:true, 
    endpoint:["Rectangle", {
        width:15,
        height:15,
        cssClass: "endPointStyle",
        hoverClass: "endPointHoverStyle"
    }], 
    setDragAllowedWhenFull:true,
    paintStyle:{
        strokeStyle: "#9f9f9f"
    },
    connectorStyle : {
        lineWidth: 4, 
        strokeStyle:"#ec51bb"
    },
    connector:[ "Straight"],
    connectorOverlays:[ 
        [ "Arrow", {
            width:14, 
            length:10, 
            foldback: 1,  
            location:1, 
            id:"arrow"
        } ], 
        [ "Label", {
            label:"", 
            id:"label"
        } ]
    ]
};


jsPlumb.addEndpoint(itemId1,{  anchor:[ 0.5, -0.05, 0, 1, 0, -4 ] }, endpointOptions);
jsPlumb.addEndpoint(itemId2,{  anchor:[ 0.5, -0.05, 0, 1, 0, -4 ] }, endpointOptions);

var anchors= [[ 0.5, -0.05, 0, 1, 0, -4 ], [ 0.5, -0.05, 0, 1, 0, -4 ]];

var newConnection = jsPlumb.connect({
    source: itemId1,
    target: itemId2,
    anchor: anchors
    },
    connectorOptions
);

Answer 1

试试这个。现在它在每个元素上有2个端点，您可以使用它们连接到另一个元素而无需创建新端点。您只需要将maxConections属性添加到端点声明。

var windows = jsPlumb.getSelector(".chart-demo .window");
            for (var i = 0; i < windows.length; i++) {
                instance.addEndpoint(windows[i], {
                    uuid:windows[i].getAttribute("id") + "-bottom",
                    anchor:"Bottom",
                    maxConnections:-1
                });
                instance.addEndpoint(windows[i], {
                    uuid:windows[i].getAttribute("id") + "-top",
                    anchor:"Top",
                    maxConnections:-1
                });
            }

            instance.connect({uuids:["chartWindow3-bottom", "chartWindow6-top" ], overlays:overlays});
            instance.connect({uuids:["chartWindow1-bottom", "chartWindow2-top" ], overlays:overlays});
            instance.connect({uuids:["chartWindow1-bottom", "chartWindow3-top" ], overlays:overlays});
            instance.connect({uuids:["chartWindow2-bottom", "chartWindow4-top" ], overlays:overlays});
            instance.connect({uuids:["chartWindow2-bottom", "chartWindow5-top" ], overlays:overlays});

Answer 2

div ids ==＆gt;打开，phone1每个都有一个翻转ep

<div class="w" id="opened">BEGIN<div class="ep"></div></div>
<div class="w" id="phone1">PHONE INTERVIEW 1<div class="ep"></div></div>

例如：http://jsplumbtoolkit.com/demo/dynamicAnchors/jquery.html 如何使instance.connect({ source:tmp_source, target:tmp_target });在for块中运行。

例如：

for(){
 var tmp_source="opened";
 var tmp_target="phone1";
 instance.connect({ source:tmp_source, target:tmp_target });// this line not run

}

JsPlumb以编程方式创建了连接隐藏端点

2 个答案: