jsplumb - jsplumb - div のすべての側から接続をドラッグ アンド ドロップする

Question

jsplumbを使ってフローチャートエディタを作っています。jsplumb のフローチャート コネクタ デモでは、div の片側からドラッグ アンド ドロップ接続を作成できました。その div を受け入れて、4 つの側面すべてから接続を作成したいと考えています。

ありがとう。

Answer 1

エンドポイントオプションを使用

isSource:true、isTarget:trueを設定し ます。

各エンドポイントが両方の役割を果たすようにする

Answer 2

エンドポイントを div の任意の側に移動する場合は、動的アンカーを使用する必要があります。

これらは、UI で何かが移動または描画されるたびに最も適切な場所を選択して、多数の場所のいずれかに配置できるアンカーです。

DynamicAnchor を作成するための特別な構文はありません。個々の静的アンカー仕様の配列を提供するだけです

代わりに Default Dynamic Anchor を使用できることを回避するには

jsPlumb は、TopCenter、RightMiddle、BottomCenter、および LeftMiddle から選択する「AutoDefault」と呼ばれる動的アンカーを提供します。

たとえば、追加する場合、エンドポイントは次のように指定できます。

        var anEndpoint = {
            endpoint: "Rectangle",
            isSource: true,
            isTarget: true,

            anchor:"AutoDefault"
        };

試すには、このフィドラーを使用します

詳細については、jsPlumb のドキュメントを参照してください。