在jsPlumb图表中显示连接丢弃选项

show connection drop options in jsPlumb chart

本文关键字：连接 选项 显示 jsPlumb      更新时间：2023-09-26

我正在尝试制作一个网络工具，供用户制作流程图，这是分层的。我正在尝试可视化新的可拖动连接的范围。

每个节点的底部都有"起点"，并且可以在顶部接收连接。（这是为了增强层次结构）。现在在我的jsfiddle 中

http://jsfiddle.net/SCSaf/

您可以将"起点"视为正方形，将"终点"视为点。如果你开始从正方形拖动连接，你会看到一个正方形，这很奇怪，因为它应该连接到一个点。我不得不改变这一点，因为那样可以解决我的问题。我做不好。我试着改变这个位置：

var exampleGreyEndpointOptions = {
    endpoint:"Rectangle",
    paintStyle:{ width:25, height:21, fillStyle:'#666' },
    isSource:true,
    connectorStyle : { strokeStyle:"#666" },
    isTarget:false,
    maxConnections:5
};

connectorStyle只更改"箭头"，我找不到更改箭头尖端方形的选项。

另一个选项类似于draggable的jsPlumb演示：

http://jsplumbtoolkit.com/draggableConnectors/jquery.html

在这里，您可以看到在dragstart上，接收节点得到一条红色虚线。如果我可以将类似的样式应用于"端点"，那也没问题。这个例子的问题是，它还会突出显示其他节点/容器的"起点"。（无法连接）需要明确的是，jsfiddle按照我的意愿工作，只是Visuals有点令人困惑。希望你能帮忙。

我很确定我试过了，但现在我成功了：

添加CSS:

.dragActive {
    border: 2px dotted orange;
}

类似var的：

var exampleDropOptions = {
    tolerance:"touch",
    hoverClass:"dropHover",
    activeClass:"dragActive"
};

并相应地更改端点选项：

var endpointOptions = {
    // ....
    dropOptions: exampleDropOptions
}

这是更新后的JS fiddle。作品http://jsfiddle.net/SCSaf/1/

相关文章：