問題タブ [jsplumb]

jsPlumbを使用して、クイズの質問と回答を結び付けようとしています。この作業のほとんどは、エンドポイントから別のエンドポイントにドラッグするのではなく、質問をクリックしてから回答をクリックできるようにすることを期待しています。これは、タッチ デバイスでのドラッグが面倒だからです。これは可能ですか？

これがドラッグが機能している私のjsbinです

これが私が使用しているjqueryです。

私は中規模のプロジェクトに jsPlumb を使用しています。ドキュメンテーションは説明がしっかりしているという点では薄いですが、なんとかプロジェクトを完了し、配信する準備が整いました。

納車直前に、接続線を曲線ではなく真っ直ぐにしてほしいと頼まれました。これは、jsPlumb connect メソッドに次のようなキーワードを追加するのと同じくらい簡単だと思っていましたjsPlumb.connect({ connector: 'Straight'... })。だから問題は何ですか？

私が取り組んでいるこのプロジェクトでは、ユーザーが接続線を「選択」できるようにして、「削除」ボタンを押して選択した接続をクリアできるようにする必要があります。次のようにjsPlumb のsetPaintStyle()メソッドを呼び出して、ユーザーが接続を選択できるようにしました。

これは、線が曲がっている場合にのみ期待どおりに機能します ( jsPlumb デフォルト)。

ただし、メソッドのconnectorオプションが"Straight"connect()に変更された場合、垂直な接続線 (端点が互いに向かい合っている) は、クリックすると単純に消えます。端点が互いに直接向かい合っていない残りの直線には、この問題はありません。

コネクタ オプションを完全に削除するか、その値を「Bezier」に設定するかsetPaintStyle()、オプションが「Straight」に設定されているときにメソッドを呼び出さないと、クリックされた線は本来の位置に留まります。

以下は jsBin の例です: jsPlumb setPaintStyle() with Straight lines bug

最初は、これは私のアプリケーションのバグだと思っていましたが、多くの時間を費やした後、setPaintStyle() メソッドまで問題を突き止めました。これは jsPlumb のバグであると確信していますが、完全にはわかりません。この時点で非常にイライラします。なぜなら、プロジェクトの提供を妨げているのは、ストロークの色を赤に変更する機能だけだからです。この単純なタスクを直線で完了することができれば、前進できます。

私は自分で SVG パス ノードをターゲットにしてストロークの色を変更することを検討しましたが、jsPlumb は IE8 の VML を使用するため ( ie8 はこのプロジェクトの要件です)、それができるかどうかはわかりません。助言がありますか？

jsPlumbとjQueryEasyUIで実際の問題が発生しました。

ここで何が起こりますか。EasyUIを使用しているWebサイトがあり、それにjsPlumb接続を追加しようとしましたが、この接続が希望どおりに動作していません。

jsPlumbのみを使用してデモを準備しましたが、機能しています。しかし、既存のサイトに追加すると、接続が機能しません。

紛争がどこにあるかを調査した後、私はこれに行き着きました：

EasyUIをロードしない限り、jsPlumbは機能します。EasyUIをロードした後：

• ソースエンドポイントをドラッグして新しい接続を作成できません（エンドポイントをドラッグしましたが、新しい接続が作成されました）
• エンドポイントは、それらが属するdivには従いません（マウスでポイントすると、エンドポイントは正しく配置されます）

jsFiddleを使用して2つのデモを準備し、意味を示します。この2つのサンプルが異なるのは、jquery.easyuiの外部リソースだけだと思います。

• 作業中のjsPlumbフルスクリーン結果
• 動作しない：フルスクリーンの結果

どうすればこれを解決できますか？たぶんあなたの何人かはどこが対立しているのか知っています。私のサイトは、この時点でEasyUIを他のものに変更することになっています。これほど強力なツールキットが見つからないため、jsPlumbを使用したいと思います。

編集：

提案されたように、ドラッグ可能をオーバーライドしようとしましたが、部分的には機能しますが、希望どおりには機能しません。

部分的に：

• エンドポイントはドラッグできなくなりました-それは良いことです、
• しかし、彼らは新しい接続を作成しません、それは悪いことです。
• それらは、接続されているウィンドウには従いません。

さらに今、私は今、そのEasyUIがドラッグ可能なjQueryをオーバーライドし、これがこの奇妙な（私にとって）振る舞いを引き起こします。悲しいことに、ドラッグ可能なメソッドを元のjQueryメソッドにすることに問題があります...だから、私の問題に対する他の解決策を楽しみにしています

編集：EasyUIとその動作でドラッグ可能およびドロップ可能オーバーライドに関連するすべてを削除します。問題は、easyuiスクリプトではなくプログラムでこれを行う方法です。誰かが新しいバージョンに更新し、すべてが機能しなくなるためです...

単純なことをするためだけにjsplumbsに苦労しています。divを1本の直線で接続しているだけですが、ウィンドウのサイズを変更するときに線を再描画するにはどうすればよいですか？したがって、それは常にdivの中心に従います。z-indexを使用して行をdivの下に配置できますか？1つのdivを他の複数のdivに接続する必要がある場合、1つのdivから複数の線を描画するための最良のアプローチは何ですか？

これがこれまでの私のコードです：

http://jsbin.com/esuvuw/1/edit

ご協力いただきありがとうございます

私の英語でごめんなさい。

jsPlumbで図を描き、キャプチャした画像をエクスポートしたい。

Jsplumb は、次のように svg でレンダリングされます。

これをキャンバスに変換したい（これは html2canvas で画像に変換できます-私はこの方法を試します：Google docs）または画像に直接変換します。jsPlumb は、ファイルではなく html で SVG を生成するため、svgeezyを使用できません。canvg を使用しようとしましたが、できません (不適切なドキュメント)。

クライアント側のソリューションか、より簡単なサーバー側のソリューションが必要です。

jsPlumb のサンプル コード: http://jsfiddle.net/WRUra/3/ div1 を div2 または div3 コンテナーに接続し、コネクタ要素を svg でレンダリングするだけです。

よろしく、 ゼルボ

最初に、私は（初めて）jsPlumbを試しています。jsPlumb のドキュメントやグーグルで次のことを見つけることができなかったようで、今はぐるぐる回っているので、先に進んで質問する時が来ているに違いありません: 基本的に、要素を相対的に配置して jsPlumb で動作させることはできますか?

例：以下は完全に機能します

しかし、ボックスの「位置: 絶対」を「位置: 相対」に変更すると、動作が不安定になります (特に、現在のビューを超えてボックスをドラッグする場合)。jsPlumb は絶対配置要素のみを必要としますか? 要素を相対的に配置して初期化したい場合はどうなりますか? この（一種の）質問が尋ねられた場合、またはどこかのドキュメントに記載されている場合は申し訳ありませんが、見つかりませんでした。

jsPlumb（jquery付き）を使って家系図型のプログラムを作りたいです。ノードをドラッグ可能にしたいのですが、jsPlumb がそれを実行できることを知っています。ただし、ノードをドラッグして再配置した後、ユーザーが変更を保存できるようにしたいと思います。正確なレイアウトが保存されます。各要素の座標を取得してデータベースに保存し、そのデータを使用してページを再作成する必要があります。これを最も効率的な方法で行うにはどうすればよいですか?

私はjsplumbが初めてです。このサンプルを完成させるためにあなたの助けが必要です。

jsplumb を使用してソースとターゲットのエンドポイントに異なる色を設定するにはどうすればよいですか?

上記のコードは、ソース ノードとターゲット ノードに適切な色を適用しません。

接続オブジェクトの拡張/サブクラス化の例を誰か提供できますか? ドキュメントで見つけた唯一の情報は次のとおりです。

getDefaultConnectionType

デフォルトの接続タイプを返します。Connection をサブクラス化し、jsPlumb にサブクラスのインスタンスを返させたい場合に使用します。クラスのコンストラクターで次のような呼び出しを行います。

jsPlumb.getDefaultConnectionType().apply(this, arguments);

戻り値

jsPlumb で使用されるデフォルトの接続関数。

これは私には少しあいまいに聞こえます。理想的には、次のようにサブクラスを使用できるようにしたいと考えています。

ありがとう！

http://jsbin.com/ofapew/1/edit jsPlumb を使用して 2 つのポイントを接続しようとしています。(これらの緑色の点は、黒い枠のボックスの上部までです。)

最も困惑するのは、黒い輪郭が描かれたボックスの上部で、線が行くべき場所に緑色の点の終点が作られているのがわかりますが、線はそこに行きません。

緑色の点が絶対コンテナの位置にあるのではないかと思ったのですが、そうではありませんでした。それを変更しても、同じポイントに線が引かれます。

誰がこれを引き起こしているのか知っていますか?