const el1 = document.getElementById('el1')
const el2 = document.getElementById('el2')
const size = 50
const canvas = document.getElementById('canvas')
const context = canvas.getContext('2d')
let width = canvas.width = innerWidth
let height = canvas.height = innerHeight
/*------------------------------------*/
let current = null
const elements = {
el1: {
x: Math.random() * (width - size),
y: Math.random() * (height - size),
startX: 0,
startY: 0
},
el2: {
x: Math.random() * (width - size),
y: Math.random() * (height - size),
startX: 0,
startY: 0
}
}
// начальное положение
translate(el1, elements.el1.x, elements.el1.y)
translate(el2, elements.el2.x, elements.el2.y)
drawLine(
elements.el1.x,
elements.el2.x,
elements.el1.y,
elements.el2.y
)
/*------------------------------------*/
el1.addEventListener('mousedown', onMouseDown)
el2.addEventListener('mousedown', onMouseDown)
function onMouseDown(e) {
e.preventDefault()
// координаты нажатия мыши внутри элемента
elements[e.target.id].startX = e.x - elements[e.target.id].x
elements[e.target.id].startY = e.y - elements[e.target.id].y
current = e.target
document.body.addEventListener('mousemove', onMouseMove)
document.body.addEventListener('mouseup', onMouseUp)
}
function onMouseMove(e) {
const x = elements[current.id].x = e.x - elements[current.id].startX
const y = elements[current.id].y = e.y - elements[current.id].startY
translate(current, x, y)
drawLine(
elements.el1.x,
elements.el2.x,
elements.el1.y,
elements.el2.y
)
}
function onMouseUp() {
document.body.removeEventListener('mousemove', onMouseMove)
document.body.removeEventListener('mouseup', onMouseUp)
}
/*------------------------------------*/
function translate(el, x, y) {
el.style.transform = `translate(${x}px, ${y}px)`
}
function drawLine(x1, x2, y1, y2) {
context.clearRect(0, 0, width, height)
context.beginPath()
// из центра квадрата
context.moveTo(x1 + size / 2, y1 + size / 2)
// в центр другого квадрата
context.lineTo(x2 + size / 2, y2 + size / 2)
context.stroke()
}
html,
body {
margin: 0;
}
canvas {
display: block;
}
div {
position: absolute;
width: 50px;
height: 50px;
}
div:nth-of-type(1) {
background-color: tomato;
}
div:nth-of-type(2) {
background-color: lightgreen;
}
<div id="el1"></div>
<div id="el2"></div>
<canvas id="canvas"></canvas>