jquery 原生点击连线

如果您想要使用jQuery实现点击连线的效果，您可以使用jQuery的`mousedown`和`mouseup`事件来监听鼠标的按下和松开动作，并在按下时记录起点坐标，在松开时记录终点坐标并绘制连线。

以下是一个示例代码：

HTML代码：

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>
<canvas id="myCanvas"></canvas>

CSS代码：

.container {
  display: flex;
  justify-content: space-between;
  width: 400px;
  margin: 0 auto;
}

.box {
  width: 100px;
  height: 100px;
  background-color: #ccc;
  border-radius: 5px;
  cursor: pointer;
}

#myCanvas {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

JavaScript代码：

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

var isDragging = false;
var startX, startY, endX, endY;

$(".box").mousedown(function(e) {
  // 鼠标按下时记录起点坐标
  startX = e.pageX - $(this).offset().left;
  startY = e.pageY - $(this).offset().top;
  isDragging = true;
});

$("body").mouseup(function(e) {
  if (isDragging) {
    // 鼠标松开时记录终点坐标并绘制连线
    endX = e.pageX - $(".container").offset().left;
    endY = e.pageY - $(".container").offset().top;
    ctx.beginPath();
    ctx.moveTo(startX, startY);
    ctx.lineTo(endX, endY);
    ctx.stroke();
    isDragging = false;
  }
});

这段代码会在鼠标在容器内按下并移动时，记录起点坐标，鼠标松开时记录终点坐标并在画布上绘制一条连线。您可以根据需要自行修改绘制样式。