在 jsPlumb 图表中显示连接删除选项答案

【问题标题】：show connection drop options in jsPlumb chart在 jsPlumb 图表中显示连接删除选项
【发布时间】：2013-08-19 12:43:23
【问题描述】：

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

每个节点底部都有“起点”，顶部可以接收连接。（这是为了增强层次结构）。现在在我的 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

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

【问题讨论】：

标签： javascript jquery css drag-and-drop jsplumb

【解决方案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/

【讨论】：