jsPlumb에서 요소 간 연결 만들기

Question

사용자가 도구 상자에서 요소를 끌어서 캔버스에 놓은 다음 서로 연결할 수있는 간단한 UI를 만들었습니다. 하지만 각 연결 지점 (요소의 왼쪽 모서리에 흰색 사각형), 고유 한 ID를 부여한 후 연결을 만들려고하면 연결선이 캔버스의 다른 곳에서 시작되어 아래와 같이 연결되지 않습니다. 곧 마우스를 놓으면 커넥터 줄이 사라집니다.

여기서 I는 요소 삭제 관련된 CSS에 간단한 변경은 모든 차이를 만들어

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

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

     if(kind=="import") 
     { 
      var connection = $('<div>').attr('id', i + '-import').addClass('connection'); 
     } 
     else if (kind=="export") 
     { 
      var connection = $('<div>').attr('id', i + '-export').addClass('connection'); 
     } 
     else 
     { 
      var connection = $('<div>').attr('id', i + '-defined').addClass('connection'); 
     } 


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


     finalElement.append(connection); 

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

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

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

     jsPlumb.makeSource(connection, { 
      anchor: 'Continuous' 
     }); 

     $("#container").removeClass("disabledbutton"); 
     $("#toolbox").removeClass("disabledbutton"); 

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

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

     $(".toolbox-titlex").hide(); 
     $(".panel").hide(); 


    } 

Answer 1

요소를 삭제 제 JS 함수이다. 그러나이 변경이 커넥터의 동작에 얼마나 영향을 주 었는지 알아 내려고합니다. 단순히 기존의 jsPlumb 드롭 요소에 추가하는 것뿐입니다. 지금까지 가장 좋은 추측은 z- 인덱스 속성입니다. 그래서 나는 이것을 여기에서 공유 할 것을 생각했고, 이와 관련하여 추가 답변을 장려 할 것입니다.

CSS

.streamdrop { 
    border: 1px solid #346789; 
    box-shadow: 2px 2px 19px #aaa; 
    -o-box-shadow: 2px 2px 19px #aaa; 
    -webkit-box-shadow: 2px 2px 19px #aaa; 
    -moz-box-shadow: 2px 2px 19px #aaa; 
    -moz-border-radius: 0.5em; 
    border-radius: 0.5em; 
    opacity: 0.8; 
    width: 130px; 
    height: 72px; 
    line-height: 80px; 
    cursor: pointer; 
    text-align: center; 
    z-index: 20; 
    position: absolute; 
    background-color: #eeeeef; 
    color: black; 
    font-family: helvetica, sans-serif; 
    padding: 0.5em; 
    font-size: 0.9em; 
    -webkit-transition: -webkit-box-shadow 0.15s ease-in; 
    -moz-transition: -moz-box-shadow 0.15s ease-in; 
    -o-transition: -o-box-shadow 0.15s ease-in; 
    transition: box-shadow 0.15s ease-in; 
}