2017-11-17 10 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입니다 : 우측 DIV에

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

드래그 몇 가지 항목을 눌러 "새 링크 추가"및 연결을 분리 연결하려고합니다. 엔드 포인트가 변경되지 않음을 알 수 있습니다.

답변

1

jsPlumb Google 그룹에서이 문제에 대한 해결책을 찾았습니다. Image 대신 끝점 Blank을 설정하고 cssClass: 'myClass' 속성을 추가 한 다음 .myClass { background: url(...) }으로 스타일을 지정했습니다. 연결된 엔드 포인트가 추가 클래스 'jsplumb-endpoint-connected'을 얻고 다른 이미지를이 클래스의 배경으로 설정할 수 있기 때문에 원하는대로 작동합니다.