javascript - Jquery:拖动时动态绘制Svg线

Question

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

表格也可以在窗口内拖动，两个表格之间的映射和绘图线工作完美

但是当我将表格彼此靠近并且当我在表格相交后进一步移动表格时，表格之间没有绘制线条，我知道问题出在哪里，但我不知道如何解决在交叉时绘制表格之间的线

所以问题就像从左到右绘制的线条，而不是从右到左绘制的线条，它被视为交集

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

这是最小的 fiddle 示例

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

如果将左拖动框拖过右拖动框，则不会绘制线条

这只是一个演示，您可以将表 1 中的主键拖放到表 2 中，效果很好，但与反向相同，不会绘制从表 2 到表 1 的线条，而且如果您拖动表相交对于表 2，线条不会绘制

为了更好地理解:

画得很完美

但是当我们将表格靠近另一个表格时，线条就不会绘制

Answer 1

问题最终调试起来非常简单。您的问题从这里开始:

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

一旦框开始重叠，svgwidth 就会变为负值。宽度为负的 SVG 是一个错误，并且 SVG 将不会被渲染。

您要么必须防止框重叠，要么更改代码以允许“右”位于“左”的左侧。