Cytoscape js内の他のノードにノードをドラッグ・アンド・ドロップする方法はありますか？

Question

私は複合ノードからnode/sをドラッグして別のノードにドロップする方法を探しています（新しい親になります）。

この例では、複合ノード内のいくつかのキャプチャノードを示しています。しかし、私はdndによってそれらを "自由にする"方法を見つけませんでした。

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

私はまたdragoverイベント、ドラッグアウトし、そのようなことのようないくつかのHTML5のイベントが欠落しています。それを得る方法はありますか？

いくつかのノードを「移動」するために、特定のサイトスコープのjsイベントを使用しようとしましたが、ユーザーエクスペリエンスは良好ではありませんでした。

Answer 1

Cytoscape.jsを使用すると、カスタムイベントを放出して独自のジェスチャを構築できます。 dragとele.boundingBox()の上に独自のdragoverなどのイベントを作成するのはかなり簡単です。必要に応じて、ジェスチャーやカスタムイベントをautoscaffoldedextensionに再構成して再利用することができます。拡張機能を作成する場合は、the listに提出することを検討してください。他の開発者もその拡張機能を利用して貢献できます。

コアライブラリは、高価なdragoverチェックをやって排除され、パフォーマンス維持されなければなりません。それ以外の場合は、他の開発者のコ​​ア用途に悪影響を及ぼします。

あなたのカスタムジェスチャーは、コアlibができなかったことを、一定の前提で行うことができます。たとえば、dragoverなどの複合親ノードについてのみ気にする場合は、親に対してのみ境界ボックスチェックを実行できます。

Answer 2

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（後のループを切断することもできます。