有没有办法将节点拖放到Cytoscape js中的其他节点之内或之外？

Question

我正在寻找一种方法来将节点/ s拖出其复合节点并将其放到另一个节点（然后是新的父节点）。

该示例显示了复合节点中的一些捕获节点。但我发现dnd无法“释放”它们。

http://jsbin.com/gist/5b192c88616af2f75344?output

我还缺少一些HTML5事件，比如dragover，dragout等等。有办法搞定吗？

我尝试使用给定的cytoscape js事件来“移动”某些节点，但没有良好的用户体验。

Answer 1

根据maxkfranz的回答，这种方法允许通过拖动到节点来添加父节点。将tapend事件（释放后触发）绑定到孤立节点（没有父节点的节点），在这些节点中检测鼠标光标是否在父节点的边界框中。

//dragging orphan nodes into parents
cy.on('tapend', ':orphan', function(event){
    var node = event.cyTarget;
    var mouse = event.cyRenderedPosition;

    cy.$(':parent').each(function(i, ele){
        //ensure we dont drag into self
        if (ele !== node){
            //check if we dragged into a compound node
            var pos = ele.renderedBoundingBox();
            if (mouse.x > pos.x1 && mouse.x < pos.x2){
                if (mouse.y > pos.y1 && mouse.y < pos.y2){
                    console.log("Move ", node.id(), " into ", ele.id());
                    node.move({
                        parent: ele.id()
                    });
                }
            }
        }
    });
});

您可能希望使用forEach循环并在node.move（）之后中断循环，以防节点重叠和性能略有提高。

Answer 2

Cytoscape.js允许您通过发出自定义事件来构建自己的手势。在dragover和drag之上创建自己的ele.boundingBox()等事件非常简单。如果您愿意，可以将手势和自定义事件构建到autoscaffolded extension中以获得更多可重用性。如果您确实进行了扩展，请考虑将其提交给the list，以便其他开发者可以从中受益并为此做出贡献。

核心库必须保持高效，这排除了进行昂贵的dragover检查。否则，其他开发者的核心用例将受到负面影响。

您的自定义手势可以做出某些假设 - 核心库无法 - 保持更快的速度。例如，如果您只关心dragover等事件的复合父节点，那么您只能为父项进行边界框检查。