1

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

每个节点底部都有“起点”，顶部可以接收连接。（这是为了增强层次结构）。现在在我的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 仅更改“箭头”，我找不到更改箭头尖端正方形的选项。

另一个选项类似于用于可拖动的 jsPlumb 演示：

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

在这里，您可以看到在 dragstart 上，接收节点有一条红色虚线。如果我可以将类似的样式应用于“端点”，那也可以。这个例子的问题在于它还会突出显示来自其他节点/容器的“起点”。（它无法连接）要清楚，jsfiddle 可以按我的意愿工作，只有视觉效果有点混乱。希望你能帮忙。

4

1 回答 1

1

我很确定我试过这个，但现在我开始工作了：

添加CSS：

.dragActive {
    border: 2px dotted orange;
}

一个变量，如：

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

并相应地更改端点选项：

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

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

于 2013-08-20T07:32:16.450 回答