2

ユーザーがドラッグ/ドロップ インターフェイスを介してデータベース テーブル (およびそのフィールドと関係) を作成できるようにするユーザー インターフェイスを作成しています。

これが私が作成したjsFiddleです。これには多くのことが行われているように見えますが、実際には、問題を実証するために最低限必要なだけです。これが私の要件で、jsPlumb は個別に美しく処理しますが、それらをすべてまとめて実行しようとすると問題が発生します。特に問題となるのは、#2 と #3 の組み合わせです。

  1. 「テーブル」はキャンバス上でドラッグ可能です (jsPlumb.draggable() を使用)
  2. テーブル内の「フィールド」は上下にドラッグして並べ替えることができます (jQuery sortable() を使用)
  3. ユーザーはドラッグして、2 つの異なるテーブルのフィールド間に新しい「関係」を描くことができます
  4. 2 つのテーブル間の接続線は、テーブルがドラッグされたときに自動的に再描画され、「他のテーブル」に最も近い側との間で常に接続されるようにする必要があります。

#4 を達成するために、各タイルの右側と左側に特定のエンドポイントを作成するのではなく、フィールドを表す各「タイル」で jsPlumb.makeSource() と jsPlumb.makeTarget() を呼び出します。こうすることで、jsPlumb は、接続されているタイルに近い「フィールド」タイルのいずれかの側への接続線の再描画を管理できます。

ただし、＃2を達成するために、フィールドにjQueryソート可能を適用して、ユーザーに「ドラッグして並べ替える」機能を提供しています。これにより、フィールドをクリックしたときに要求している「アクション」に関して競合が発生します...ソートまたはjsPlumb接続の開始ですか? したがって、各フィールドに赤い div (「.item-hit.area」のクラス) を追加し、makeSource() 呼び出しにフィルターを追加して、新しい jsPlumb 接続の作成にその赤い div のみを使用できるようにします。

jsPlumb.makeSource($('.item'), {
    filter:function(event, element) {
        return ($(event.target).hasClass('item_hit_area'));
    }
    ....
}

したがって、赤い div をクリックすると jsPlumb に接続を開始するように指示するか、「フィールド」要素内の他の場所をクリックすると jQuery sortable() に渡されます。

うまくいけば、それらの要件は明確です。問題を再現する方法は次のとおりです。

  • 「Foo 1」の赤いタイルから「Bar 2」の本体にドラッグして、2 つのテーブル間の新しい関係を描画します
  • foos テーブルを (タイトルで) ドラッグして、#4 が適切に機能していることを確認します (すべての行が適切に再描画されます)。
  • ここで、「Foo 1」を「All my Foos」内のアイテムのリストで下にドラッグします。これにより、リストの一番上のアイテムではなく、2 番目または 3 番目のアイテムになります。これまでのところ、ドラッグすると、jsPlumb は接続線を適切に更新し続けます。
  • Foos テーブルをドラッグして移動すると、問題が発生します。これを行うと、突然、「Foo 1」と「Bar 2」を結ぶ線が間違った場所になります。残念ながら、スタックオーバーフローで画像を投稿するのに十分な評判がありません。しかし、試してみると、行が間違った場所にジャンプすることがわかります。

見知らぬ人は、他のテーブル(「All my Bars」テーブル) をドラッグすると、接続線が両端の正しい位置に戻ることです。jsPlumb 接続の「ソース」側にあったテーブルをドラッグすると、テーブルが混乱して間違った場所に線が引かれます。

4

1 に答える 1

0

問題は、jsPlumb がいくつかのドラッグ可能な要素の子要素のオフセットをキャッシュすることです。したがって、並べ替えた後、次のフィドルのように、jsPlumb にこれらのオフセットを再計算するように指示する必要があります。

http://jsfiddle.net/S7gVa/17/

次の行に注意してください。

        jsPlumb.recalculateOffsets($(ui.item).parents(".draggable"));

ソート可能な停止コールバックで。

于 2013-11-20T10:03:44.830 に答える