拖动两节点相交 改变border

1. 如何判断相交

//根据 element.getBoundingClientRect()；
   checkComingIn(ele1,ele2){
       let rect1 = ele1.getBoundingClientRect();
       let rect2 = ele2.getBoundingClientRect();
       排除所有非相交的枚举 即返回的相交的枚举
       return !(rect1.left>rect2.right||rect1.bottom>rect2.top||rect1.right<rect2.left
       ||rect1.top<rect2.bottom)
   
   }
   
   
   
   <div id='id1'></div>
   <div id='id1'></div>
   

2. 如何实现拖动能力 监听 mousedown mousemove mouseup

• 拖动时mousemove 、mouseup 要监听document 确保拖动时 鼠标移动过快移出区域后仍可以监听
• 设置left\top时 clientX clientY 要加上 'px'

   let id1 = document.getElementById('id1');
   let id2 = document.getElementById('id2');
   
   function BoundingEvent(ele){
   let isDrog = false;
   
   ele.addEventListener('mousedown',(e)=>{

    isDrog = true;
    id1.style.position = 'absolute';
}   
)
    document.addEventListener('mousemove',e=>{
    
    if(isDrog){
    ele.style.left = e.clientX +'px';
    ele.style.top = e.clientY; + 'px';
    
    if(checkComingIn(id1,id2)){
        id1.style.border = '2px solid red';
    }else{
        id1.style.border = '';
        
    }
    }
    
    })
    document.addEventListener('mouseup',e=>{
    
    isDrog = false;
    
    })

   
   
   
   }