要素の接続情報を取得する

Question

jsPlumbとJavascriptを使って、相互に接続できる要素の単純なドラッグアンドドロップインターフェイスを実装しています。ドロップされた各要素の「設定のような」ボタンがクリックされると、ソースとターゲットの接続の詳細をどのように取得できるかを知りたいと思います。

ソース：「空のクエリ」の設定アイコンをクリックすると、私は、このような

で、コネクタの接続情報を取得する必要が上記のキャンバスで

、 id - inコネクタID自体&ターゲットID- "Pixar"要素のコネクタID

アウトコネクタ：

ソースID - "パラマウント" 要素のコネクタID ID-アウトコネクタID自体&ターゲット

JS機能

function dropCompleteQueryElement(newAgent,i,e) 
{ 
    $(droppedElement).draggable({containment: "container"}); 

    var finalElement = newAgent; 
    r++; q++; 

    var connectionIn = $('<div class="connectorIn">').attr('id', i + '-in').addClass('connection').text("in"); 
    var connectionOut = $('<div class="connectorOut">').attr('id', i + '-out').addClass('connection').text('out'); 

    finalElement.css({ 
     'top': e.pageY, 
     'left': e.pageX 
    }); 

    finalElement.append(connectionIn); 
    finalElement.append(connectionOut); 

    $('#container').append(finalElement); 

    jsPlumb.draggable(finalElement, { 
     containment: 'parent' 
    }); 

    jsPlumb.makeTarget(connectionIn, { 
     anchor: 'Continuous' 
    }); 

    jsPlumb.makeSource(connectionOut, { 
     parent:finalElement, 
     anchor: 'Continuous' 
    }); 

    var myNode = document.getElementById("lot"); 
    var fc = myNode.firstChild; 

    while(fc) { 
     myNode.removeChild(fc); 
     fc = myNode.firstChild; 
    } 

} 

newAgentは、アイコンの前にツールボックスからドラッグされた要素でありますラベルが追加され、finalElementはキャンバスにドロップされた要素です。

Answer 1

私はあなたを正しく理解していますかわかりません。接続に関する情報を取得するには、jsPlumb.getConnectionsに電話する必要があります。 がイン接続に関する情報を取得するには、指定されたtargetでそれを呼び出す必要があります：

8-inは、あなたのターゲットのIDです

jsPlumb.getConnections({ target:"8-in" }); 

。

8-outがあなたの元のIDです

jsPlumb.getConnections({ source:"8-out" }); 

を：アウト接続に関する情報を取得するには、指定されたsourceでそれを呼び出す必要があります。

戻り値は接続のリストです。各接続は、必要な情報がconnection.sourceId,connection.targetIdのオブジェクトです。

詳細はjsPlumb helpを参照してください。