有两个table表格，每个表格的tr元素都有一个固定位置的锚点，左表的锚点在右边框的中心，右表的锚点的在左边框的中心。无论点击哪个锚点都可以拖出一个带有方向箭头的线，连接到另一个锚点

要实现两个表格的锚点之间可以通过拖动连接线，您可以使用jsPlumb库来完成。下面是一个示例代码，演示了如何设置两个表格的锚点，并允许通过拖动连接线：

HTML代码：

<div id="leftTable">
  <table>
    <tr id="leftAnchor">
      <td>Left Table</td>
    </tr>
  </table>
</div>

<div id="rightTable">
  <table>
    <tr id="rightAnchor">
      <td>Right Table</td>
    </tr>
  </table>
</div>

<div id="canvas"></div>

JavaScript代码：

// 初始化jsPlumb
jsPlumb.ready(function() {
  // 设置连接线的样式
  var connectorStyle = {
    strokeWidth: 2,
    stroke: "#000000",
    joinstyle: "round"
  };

  // 设置锚点的样式
  var endpointStyle = {
    endpoint: "Dot",
    paintStyle: { fill: "#000000", radius: 5 },
    isSource: true,
    isTarget: true
  };

  // 创建连接线
  jsPlumb.connect({
    source: "leftAnchor",
    target: "rightAnchor",
    connector: ["Straight"],
    paintStyle: connectorStyle,
    endpointStyle: endpointStyle
  });

  // 设置锚点的位置和方向
  jsPlumb.makeSource("leftAnchor", {
    anchor: "Right",
    endpoint: endpointStyle
  });

  jsPlumb.makeTarget("rightAnchor", {
    anchor: "Left",
    endpoint: endpointStyle
  });

  // 设置容器
  jsPlumb.setContainer("canvas");
});

请注意，以上代码仅为示例，实际使用时需要根据您的具体情况进行修改。您可以根据需要调整连接线的样式、锚点的样式以及容器的设置。确保将表格元素的ID与`makeSource`和`makeTarget`方法中的参数匹配。

通过以上代码，您可以在两个表格的锚点之间拖动连接线，并且连接线会自动根据锚点的位置和方向进行调整。