4

私は jsPlumb と呼ばれる jQuery プラグインを使用しています - http://jsplumb.org/jquery/demo.htmlで、jQuery UI ダイアログを jsPlumb によって生成された行に接続したいと考えています。しかし、私はそれを行う方法を理解できません。

私はこのソースを持っています：

<div id="okenko1">Tuhle neco je</div>
<div id="okenko2">Tuhle je neco jineho</div>

jQuery UIでこのdivからダイアログを作成すると

$("#okenko1").dialog()...

そして、私は鉛直します：

jsPlumb.connect({source: $("#okenko1"), target: $("#okenko2")});

そのバグ :-D このように見えますhttp://prntscr.com/2udde

プロセスを逆にしようとしました。最初に em を配管してからダイアログを使用しました。結果はhttp://prntscr.com/2udefです。

ここに画像の説明を入力

次に、UI によって作成された div を plumb しようとしましたが、機能していません...

次に何ができますか？ページ上の 2 つの要素を線で接続する必要があり、要素の 1 つを移動すると移動しますが、jsPlumb よりも優れたものを見つけることができません。

4

1 に答える 1

3

jsfiddle で小さなサンプルを作成しました: http://jsfiddle.net/p8XUm/4/

html:

<span id="okenko1">Tuhle neco je</span>
<span id="okenko2">Tuhle je neco jineho</span>

JavaScript:

var d = $("#okenko1").dialog({drag: function(event, ui){
    jsPlumb.repaint(d);
}}).parent('.ui-dialog');
jsPlumb.connect({source: $("#okenko2"), target: d});

div 自体ではなく、plumb エンドポイントとして親ダイアログ要素を使用する必要があります。 d = $("#okenko1").parent(".ui-dialog")

ドラッグ可能なエンドポイントの詳細については、ドキュメントを参照してください

更新: ダイアログが移動されたときにサンプルが機能するようになりました!

于 2011-08-31T10:06:41.257 に答える