選択範囲のボックスを作成するJS雑なサンプルコード

range-selection.js

(() => {
    let dragStart = false
    let div
    let startX, startY = 0

    const evtMouseDown = (e) => {
        dragStart = true
        document.body.style.userSelect = 'none'
        div = document.createElement('div')
        div.style.backgroundColor = '#ddd'
        div.style.border = '1px solid #aaa'
        div.style.opacity = 0.5
        div.style.position = 'absolute'
        div.style.zIndex = 9999
        startX = e.pageX
        startY = e.pageY
        document.body.appendChild(div)
        console.log('mouse down', e)
    }

    const evtMouseMove = (e) => {
        if (dragStart) {
            if (e.pageX > startX && e.pageY > startY) {
                // 右下
                div.style.left = `${startX}px`
                div.style.top = `${startY}px`
                div.style.width = `${e.pageX - startX}px`
                div.style.height = `${e.pageY - startY}px`
            } else if (e.pageX > startX && e.pageY < startY) {
                // 右上
                div.style.left = `${startX}px`
                div.style.top = `${startY - (startY - e.pageY)}px`
                div.style.width = `${e.pageX - startX}px`
                div.style.height = `${startY - e.pageY}px`
            } else if (e.pageX < startX && e.pageY > startY) {
                // 左下
                div.style.left = `${startX - (startX - e.pageX)}px`
                div.style.top = `${startY}px`
                div.style.width = `${startX - e.pageX}px`
                div.style.height = `${e.pageY - startY}px`
            } else {
                // 左上
                div.style.left = `${startX - (startX - e.pageX)}px`
                div.style.top = `${startY - (startY - e.pageY)}px`
                div.style.width = `${startX - e.pageX}px`
                div.style.height = `${startY - e.pageY}px`
            }
            console.log('mouse move', e)
        }
    }

    const evtMouseUp = (e) => {
        dragStart = false
        document.body.style.userSelect = 'auto'
        console.log('mouse up', e)
    }

    const addEvent = () => {
        document.addEventListener('mousedown', evtMouseDown)
        document.addEventListener('mousemove', evtMouseMove)
        document.addEventListener('mouseup', evtMouseUp)
    }

    addEvent()
    
})()