如何在draggable和droppable之间画一条线？

<div id="draggable1" draggable="true">Draggable 1</div>
<div id="draggable2" draggable="true">Draggable 2</div>

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const draggable1 = document.getElementById('draggable1');
const draggable2 = document.getElementById('draggable2');

let startX, startY, endX, endY;

draggable1.addEventListener('dragstart', (event) => {
  startX = event.clientX;
  startY = event.clientY;
});

draggable1.addEventListener('dragend', () => {
  endX = startX;
  endY = startY;
  drawLine();
});

draggable2.addEventListener('dragstart', (event) => {
  startX = event.clientX;
  startY = event.clientY;
});

draggable2.addEventListener('dragend', () => {
  endX = startX;
  endY = startY;
  drawLine();
});

function drawLine() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.beginPath();
  ctx.moveTo(startX, startY);
  ctx.lineTo(endX, endY);
  ctx.stroke();
}