connexion jsPlumb, si div a été transformé css

Question

jsPlumb problème de connexion, si div était avec CSS transformed (transform: translate(50px, 10px);).
Exemple:
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" 
    }); 
}); 

jsFiddle https://jsfiddle.net/fara/fc6k8fqn/1/
Il existe un moyen de réparer/résoudre?

Answer 1

Évitez d'utiliser les valeurs de transformation de position d'utilisation à la place (à gauche, en haut, etc ..)

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>