SOURCE

console 命令行工具 X clear

                    
>
console
{
  function getCss(el, attr){
    return parseInt(getComputedStyle(el)[attr]);
  };
  

  let drag = (el, el2)=>{
    el.addEventListener('mousedown',e=>{
        let startPos = {
            x: e.clientX,
            y: e.clientY
        };
        let l = getCss(el, 'left');
        let t = getCss(el, 'top');
      
        let detection = ()=>{
            let el1Rect = el.getBoundingClientRect();
            let el2Rect = el2.getBoundingClientRect();
            if(el1Rect.right < el2Rect.left || el1Rect.bottom < el2Rect.top || el1Rect.left > el2Rect.right || el1Rect.top > el2Rect.bottom) {
                console.log('没有碰上了');
            }else {
                console.log('碰上了');
            }
        };

        let move = e=>{
            let nowPos = {
              x: e.clientX,
              y: e.clientY
            };
            let disPos = {
                x: nowPos.x - startPos.x + l,
                y: nowPos.y - startPos.y + t
            };

            detection();

            el.style.top = `${disPos.y}px`;
            el.style.left = `${disPos.x}px`;
        };
      
        document.addEventListener('mousemove', move);
        document.addEventListener('mouseup', ()=>{
            document.removeEventListener('mousemove',move);
        }, {once: true});
        e.preventDefault();
    });
  };
  
  let oBox = document.querySelectorAll('.box');
  drag(oBox[0], oBox[1]);
  drag(oBox[1], oBox[0]);
}
<!doctype html>
<html>
  <header>
  <meta charset="utf-8">
  <link href="//jsrun.net/CzyKp.css">
  </header>
  <body>
    <div class="box"></div>
    <div class="box"></div>
    <script src="//jsrun.net/CzyKp.js"></script>
  </body>
</html>
body, div {
  margin: 0;
  padding: 0;
}
.box {
  width: 100px;
  height: 100px;
  background: #f00;
  position: absolute;
  left: 0;
  top: 0;
}
.box:nth-of-type(1) {
  left: 100px;
  top: 100px;
}
.box:nth-of-type(2) {
  left: 300px;
  top: 300px;
  background: #00f;
}