改正绝对定位导致jsPlumb偏移问题

最近用jsPlumb-2.0.5这个插件画点前端UI,总的来说,这个库的功能还是不错,唯API设计不够优雅,还有一些细节问题,例如坐标定位,如所示结构:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<aside class="content-wrapper sidebarLeft collapse">
<!-- Page Content -->
<div class="content full-width container-fluid">
<div class="row">
<div class="col-sm-12">
<div class="panel panel-white border-top-green">
<div class="panel-body">
<div id="canvas" class="livecanvas row">
<div id="source_nodes" class="grid col-md-6">
</div>
<div id="target_nodes" class="grid col-md-6">
</div>
</div>
</div>
</div>
</div>

假设,我们在id=canvas的DOM上绘制jsPlumb图像,由于jsPlumb不支持相对定位方式,绘制的图像例如Endpoint,Connect等会有偏移:
absolute-offset
jsPlumb给EndPoint计算的坐标相对于浏览器Client区域左上角是正确的,那为什么还是有偏移呢?因为css的absolute定位定义是:参考DOM是离当前元素最近的定位方式为fixed, absolute, relative的祖先,我们可以用看看canvas的offsetParent是谁:
offset-parent
祖先是class为col-sm-12的DOM,再看看他,是不是设置过position:
position

确实如此,那么如何修改?

  1. 修改col-sm-12的style,直接删除position也可以,但是这样改整个bootstrap的排版都会受到影响。

  2. 通过jsPlumb的Anchor机制,传入OFFSET,例如,将:

    1
    anchor: [ "Top" ],

    修改为:

    1
    anchor: [ [0.5, 0, 0, -1, $("#youreid .col-sm-12").offset().left, $("#youreid .col-sm-12").offset().top] ],

    很遗憾,jsPlumb连线的时候他并没有把offset计算进去,这样修改只修改了Endpoint。

  3. 利用css优先级,我们重新写一个class:

    1
    2
    3
    .col-sm-12.jsplumb-fix {
    position: inherit !important;
    }

    将代码:

    1
    <div class="col-sm-12">

    修改为:

    1
    <div class="col-sm-12 jsplumb-fix">

修改后效果OK:
right-offset