9

jsPlumb で作成されたすべてのダイアログ/ウィンドウをランダムに配置する方法はありますか?

これらのダイアログで表現したいアイテムがたくさんある場合、問題は、それらに位置を与えて画面に配置する必要があることですが、アイテムがたくさんあるので、面倒な仕事になることは言うまでもありませんアイテムのリストは拡大/縮小する可能性があります。

jsPlumb デモを見ると、「上」と「左」の CSS プロパティを使用してダイアログに特定の位置が与えられています。

#window3 { top:2em; left:2em; }
#window4 { top:2em; left:32em; }

これらのダイアログを画面上にランダムに配置する方法はありますが、それらの間に一定の距離がありますか? ダイアログを画面上に配置する方法があれば、矢印とダイアログの間の交差が最小限に抑えられます。

編集：

正確には最良の解決策ではありませんが、かなり良い解決策です:

http://forums.lndb.info/showthread.php?tid=43

https://github.com/lndb/jsPlumb_Liviz.js (ここには 2 つのデモが用意されています)

http://lndb.info/light_novel/diagram/Hidan_no_Aria

4

2 に答える 2

1

私が質問を正しく理解している場合、あなたはコンポーネントの初期配置について懸念しており、（コンポーネントのサイズとコンポーネントの量に関係なく）一般的な解決策を探しています。

関心の分離：初期コンポーネントの配置のタスクは、jsPlumpとは独立して見なすことができます。

私の例では、次の要件を持つアルゴリズムを選択しています。

  • ビューポートの幅を水平方向の封じ込めとして、コンポーネントを画面上に均等に配置します

  • コンポーネントのマージンはCSSで調整可能である必要があります

  • jsPlumbの機能を維持するには、コンポーネントをドラッグ可能のままにする必要があります

私のソリューションでは、相対的な配置を使用すると、コンポーネントをグリッドに簡単に分散できるという事実を利用しています。含まれているDIVに初期クラス「initial」を指定して、コンポーネントに対して次のCSSを定義しています。

#demo.initial .component.window {
    position:relative;
    float:left;
    margin:60px;
}

DOMコンポーネントがグリッドとしてレンダリングされた直後に、CSSの位置を相対から絶対に変更しています（コンテナーの「初期」クラスを削除し、スタイル属性内にコンポーネントのオフセットを適用することにより）。

$(document).ready(function() {
    $(".component.window").each(function(i) {
        var left = $(this).offset().left;
        var top = $(this).offset().top;
        $(this).css({
            left: left,
            top: top
        });
    });
    $("#demo.initial").removeClass("initial");
});

これが私のjsbinへのリンクです

編集：これがjsfiddleへのリンクです

コンポーネントの初期位置は、ターゲットフレームの幅によって異なります。

于 2013-03-04T11:52:34.663 に答える