HELP

<div id="canvas">
        <div class="draggable blue" id="blueDrag"></div>
        <div class="draggable green" style="top: 120px; left: 120px;" id="greenDrag"></div>
        <svg id="svg"></svg>
</div>

<script>
        const container = document.querySelector('#canvas')
        const svg = document.querySelector('#svg')

        const blueDrag = document.querySelector('#blueDrag')
        const greenDrag = document.querySelector('#greenDrag')

        let xPosition, yPosition, activeElement

        const handleDrag = (element) => {
            element.addEventListener('mousedown', (e) => {
                activeElement = element

                
                xPosition = e.clientX - parseInt(window.getComputedStyle(element).left)
                yPosition = e.clientY - parseInt(window.getComputedStyle(element).top)
                activeElement.style.cursor = 'grabbing'

                document.addEventListener('mousemove', moveElement)
                document.addEventListener('mouseup', dropElement)
            })
        }

        const moveElement = (e) => {
            
            let maxX = e.clientX - xPosition
            let maxY = e.clientY - yPosition

            
            maxX = Math.max(8, Math.min(maxX, container.clientWidth - activeElement.clientWidth) - 8)
            maxY = Math.max(8, Math.min(maxY, container.clientHeight - activeElement.clientHeight) - 8)

            
            activeElement.style.left = `${maxX}px`
            activeElement.style.top = `${maxY}px`
        }

        const dropElement = (element) => {
            document.removeEventListener('mousemove', moveElement)
            document.removeEventListener('mouseup', dropElement)
            activeElement.style.cursor = 'grab'
        }

        handleDrag(blueDrag)
        handleDrag(greenDrag)

        let firstClickElement = null
        let secondClickElement = null
        let lineElement = null

        const handleClick = (element) => {
            element.addEventListener('mousedown', (e) => {
                if (e.detail === 2) {
                    if (!firstClickElement) {
                        firstClickElement = element
                        console.log('Duplo clique', element.id)
                    }
                } else {
                    if (firstClickElement && element !== firstClickElement) {
                        console.log('Clique simples', element.id)
                        secondClickElement = element

                        drawLine(firstClickElement, secondClickElement)

                        
                        firstClickElement = null
                        secondClickElement = null
                    }
                }
            })
        }

        const drawLine = (startElement, endElement) => {
            const firstClick = startElement.getBoundingClientRect()
            const secondClick = endElement.getBoundingClientRect()

            const startX = firstClick.left - container.getBoundingClientRect().left + firstClick.width / 2
            const startY = firstClick.top - container.getBoundingClientRect().top + firstClick.height / 2
            const endX = secondClick.left - container.getBoundingClientRect().left + secondClick.width / 2
            const endY = secondClick.top - container.getBoundingClientRect().top + secondClick.height / 2

           
            if (lineElement) {
                svg.removeChild(lineElement)
                lineElement = null
            }

            // Cria a nova linha
            const line = document.createElementNS('http://www.w3.org/2000/svg', 'line')
            line.setAttribute('x1', startX)
            line.setAttribute('y1', startY)
            line.setAttribute('x2', endX)
            line.setAttribute('y2', endY)
            line.setAttribute('class', 'line')
            svg.appendChild(line)

            
            line.addEventListener('dblclick', function () {
                svg.removeChild(line)
                lineElement = null
            })

           
            lineElement = line
        }

        handleClick(blueDrag)
        handleClick(greenDrag)
    </script>

Consegui elaborar