jsPlumb 连接自定义覆盖 - 端点未移动答案

【问题标题】：jsPlumb connecting custom overlays - endpoint not movedjsPlumb 连接自定义覆盖 - 端点未移动
【发布时间】：2013-05-31 15:26:13
【问题描述】：

我正在 jsPlumb 中为我的连接创建自定义叠加层。

connectorOverlays: [
        ["Custom", {
            create: function(component) {
              return connectionNode();
            },
            location:0.5,
            id:"customOverlay"
        }]
    ]

connectionNode() 创建一个带有选择列表的 div。 div本身应该是可连接的，即我想连接不同连接器的两个标签。

  var overlay_div = $(connection.overlays[0].canvas);
  jsPlumb.addEndpoint(overlay_div, { anchor:[ "Perimeter", { shape:"Rectangle"}] }, relationEndpoint);

连接器覆盖上的端点定义如下：

var relationEndpoint = {
        endpoint:["Dot", {radius:4} ],
        anchor: ["BottomRight","TopLeft", "TopRight", "BottomLeft"],
        paintStyle:{ fillStyle:"#ff33333", opacity:0.5 },
        isSource:true,
        connectorStyle:{ strokeStyle:"#ff33333", lineWidth:3 },
        connector : "Flowchart",
        isTarget:true,
        dropOptions : {
        tolerance:"touch",
        hoverClass:"dropHover",
        activeClass:"dragActive"
    },
        beforeDetach:function(conn) { 
            return confirm("Detach connection?"); 
        }
    };

当我现在移动任何通过自定义覆盖连接连接的原始节点时，端点不会与标签一起移动，而是在创建它的位置保持静态。我可以以某种方式以编程方式触发它的运动还是我缺少一些配置选项？

【问题讨论】：

您好，我正在尝试完成您在这里所做的事情，但遇到了语法问题。你能提供洞察力吗？

标签： jsplumb

【解决方案1】：

我也有这个问题。我能够修复它

instance.draggable(jsPlumb.getSelector(".flowchart-demo .window"), { grid: [5, 5] });

".flowchart-demo .window" 是 div 的类。

显示的示例来自 jplumb 页面示例...在我的项目中，此行保留

instance.draggable(jsPlumb.getSelector(".flowchart-demo .clsExecutando"), { grid: [5, 5] });

希望这些信息对您有所帮助。

【讨论】：