jsPlumb連接，如果div被css轉換

Question

jsPlumb連接問題，如果div與CSS transformed (transform: translate(50px, 10px);)。
實施例：
HTML

<div class="c1"> 
<div id="a1"> 
test1 
</div> 
</div> 

<div class="c2"> 
<div id="a2"> 
test2 
</div> 
</div> 

CSS

.c1{ 
position: absolute; 
width: 50px; 
height: 50px; 
background: #FF0000; 
transform: translate(50px, 50px); 
} 
.c2{ 
position: absolute; 
width: 50px; 
height: 50px; 
background: #FF0000; 
transform: translate(150px, 100px); 
} 

JS

$("#click1").click(function(){ 
    jsPlumb.connect({ 
    source: "a1", 
    target: "a2" 
    }); 
}); 

https://jsfiddle.net/fara/fc6k8fqn/1/的jsfiddle
有什麼方法可以修復/解決？

Answer 1

避免使用變換使用位置值，而不是（左，上，等等。）

jsPlumb.setContainer(document.getElementById("body")); 
 
    
 
$("#click1").click(function() { 
 

 
\t \t jsPlumb.connect({ 
 
    \t source: "a1", 
 
    \t target: "a2" 
 
    }); 
 
});

.c1{ 
 
    position: absolute; 
 
    width: 50px; 
 
    height: 50px; 
 
    background: #FF0000; 
 
    left: 50px; 
 
    top: 50px; 
 
    /* transform: translate(50px, 50px); */ 
 
} 
 
.c2{ 
 
    position: absolute; 
 
    width: 50px; 
 
    height: 50px; 
 
    left: 100px; 
 
    top: 150px; 
 
    background: #FF0000; 
 
    /* transform: translate(150px, 100px); */ 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsPlumb/2.5.5/js/jsplumb.min.js"></script> 
 
<div id="body"> 
 
    <button id="click1">click</button> 
 

 
    <div class="c1"> 
 
    <div id="a1">test1</div> 
 
    </div> 
 

 
    <div class="c2"> 
 
    <div id="a2">test2</div> 
 
    </div> 
 
</div>