2017-11-17 18 views
0

私のプロジェクトでjsPlumbライブラリを使用していて、接続されていればエンドポイント画像を変更する機能があります。私はページが読み込まれ、すべて正常に動作しますが、接続イベントで呼び出すと何も起こりません。jsPlumbエンドポイントに画像を設定できません

function changeEndpointImage(){ 
      var elem = $('.tableBody'); //These are my connectable elements 
      for(var i=0;i<elem.length;i++) 
      { 
       var eps=jsPlumb.getEndpoints($(elem[i])); //Getting endpoints for each of the connectable elements 
       for(var j=0;j<eps.length;j++) 
       { 
         if(eps[j].connections.length!=0) //Checking if any of them have connections 
          eps[j].setImage("images/styled_radiobutton.png"); //Setting another image 
       } 
      } 
     } 
jsPlumb.bind("connection", function(connection) { 
    changeEndpointImage(); 

    //I have also tried this method commented below, but nothing. 
    //connection.sourceEndpoint.setImage("images/styled_radiobutton.png"); 
    //connection.targetEndpoint.setImage("images/styled_radiobutton.png"); 

}); 

私も、接続が切り離された場合は、最初の外観に戻ったエンドポイントの画像を変更しようとしているが、この場合には、唯一のソースエンドポイントが変更されますが、ターゲットは同じまま:ここに私のコードです

jsPlumb.bind("connectionDetached", function(connection) { 
    connection.targetEndpoint.setImage("images/rsz_styled_radiobutton.png"); 
    connection.sourceEndpoint.setImage("images/rsz_styled_radiobutton.png"); 
}); 

この問題を解決するにはどうすればよいですか?

編集:ここにjsfiddleです:

https://jsfiddle.net/vaxobasilidze/cg3hkde7/

ドラッグしていくつかの項目は、右のdiv、押して「新しいリンクを追加」との接続を切り離す添付しようとします。エンドポイントが変更されないことがわかります。

答えて

1

私はjsPlumb Googleグループでこれに対する解決策を見つけました。 Imageの代わりにBlankエンドポイントを設定し、cssClass: 'myClass'プロパティを追加して、.myClass { background: url(...) }のスタイルを設定しました。接続されたエンドポイントは追加のクラス'jsplumb-endpoint-connected'を取得し、別のイメージをこのクラスのバックグラウンドとして設定することができるので、これは私が望んだことです。

関連する問題