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"
  });
});

JsFiddle https://jsfiddle.net/fara/fc6k8fqn/1/
有什么方法可以修复/解决？

Answer 1

避免使用转换使用位置值（左，上等等）

.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>

$numbers = array_filter(explode(' ', $string), 'ctype_digit');

jsPlumb连接，如果div被css转换

1 个答案: