Jquery:在拖动时动态绘制Svg线

时间:2015-01-17 09:37:17

标签: javascript jquery svg

我需要将单元格从一个表拖放到另一个表中,我用它来动态地为SQL表开发外键映射

表格也可以在窗口内拖动,两张表格之间的映射和绘图线完美运行

但是当我把桌子彼此靠近并且当我在桌子的交叉点之后进一步移动桌子时,线条没有在桌子之间绘制,我得到的问题来自但我无法弄清楚,如何在交叉点绘制表格之间的线条

所以这个问题就像是从左到右画线而不是从右到左画出它作为交叉点

Example: http://jsfiddle.net/mohamedmusthafac/2ecsjomz/embedded/result/

这是最小的例子小提琴

Example : http://jsfiddle.net/mohamedmusthafac/2ecsjomz/4/

如果您在右侧拖动框中拖动左侧拖动框,则行不会绘制

这只是一个演示,你可以从表1中拖动主键并将其放在表2中完美地工作,但是与反向相同不会将表格中的线条绘制到表格1中,如果拖动表格相交也是如此与表2不会画线

为了更好地理解:

画得很完美 enter image description here

但是当我们将桌子靠近另一张桌子时,线条并没有画出来 enter image description here

1 个答案:

答案 0 :(得分:1)

最后调试问题非常简单。你的问题从这里开始:

svgleft = Math.round(el1pos.left + el1W);
svgwidth = Math.round(el2pos.left - svgleft);

一旦框开始重叠,svgwidth变为负数。宽度为负的SVG是一个错误,SVG将不会被渲染。

你要么必须防止盒子重叠,要么改变代码以允许'right'在'left'的左边。