SOURCE

console 命令行工具 X clear

                    
>
console
var box = `<div class="box"></div>`

for(let i = 0; i < 20; i++) document.body.innerHTML += box

let pressTimer = null
let mouseMoveEvent = false
let pos = {start: {x: null, y: null}, end: {x: null, y: null}}

window.addEventListener('mousedown', (e) => {
	if (e.target.className !== 'box') {
    let eleArr = document.getElementsByClassName('active')
  	let len = eleArr.length
    for( let i = 0; i < len; i++) {
      document.getElementsByClassName('active')[0].className = 'box'
    }
  } else {
    pressTimer = setTimeout(function() {
	    mouseMoveEvent = true
	    pos.start.x = e.pageX;
	    pos.start.y = e.pageY;
	    let curTarget = e.target
	    if(curTarget.className === 'box') {
	      curTarget.className += " active";
	    } else {
	      debugger
	      // document.getElementsByClassName('active').className
	    }
  	}, 1000)
  }
  return false;
},false)

window.addEventListener('mouseup', (e) => {
  if(mouseMoveEvent) {
  	  pos.end.x = e.pageX;
	  pos.end.y = e.pageY;
	  for(let i = 0; i < 20; i++) {
	    let ele = document.getElementsByClassName('box')[i]
	    if(ele.getBoundingClientRect().left + 100 > pos.start.x 
	    	&& ele.getBoundingClientRect().left < pos.end.x 
	    	&& ele.getBoundingClientRect().top + 100 > pos.start.y 
	    	&& ele.getBoundingClientRect().top < pos.end.y ) {
	      ele.className = 'box active'
	    }
	  }
	}
  clearTimeout(pressTimer);
  mouseMoveEvent = false
  return false;
},false)

window.addEventListener('mousemove', (e) => {
  if(!mouseMoveEvent) {
    return;
  } else {
    console.log('111')
  }
  clearTimeout(pressTimer);
  return false;
},false)
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
.box {
  display: inline-block;
  width: 100px;
  height: 100px;
  background-color: gray;
}

.box.active {
  background-color: skyblue;
}