JS实现拖拽功能

拖拽功能是我们日常项目中常用的效果，今天我们就来研究一下如何实现简单的拖拽功能。
想实现拖拽功能其实很简单，主要需要三个事件：
1、mousedown：鼠标按下
2、mousemove：鼠标移动
3、mouseup：鼠标抬起

思路很简单，鼠标按下的时候，记录下鼠标按下时的x,y，即e.clientX和e.clientY，还有记录下当前div的坐标位置即div.offsetLeft及div.offsetTop。当鼠标移动时，再次记录下鼠标当前的x,y，
此时div坐标分别为：
x=现在的鼠标位置x-开始按下的鼠标位置x+div的原始坐标x
y=现在的鼠标位置y-开始按下的鼠标位置y+div的原始坐标y
最后当鼠标抬起时，解绑。

下面上代码：

  function drag(el){
            el.addEventListener('mousedown',function(e){  
                let start = {
                    x:e.clientX,
                    y:e.clientY
                }
                let startPos = {
                    x:css(el,'left'),
                    y:css(el,'top')
                }
                function move(e){
                    let dis = {
                        x:e.clientX-start.x,
                        y:e.clientY-start.y
                    }

                let x = dis.x+startPos.x;
                let y = dis.y+startPos.y;

                //边界处理，取大小值
                x=  Math.max(0,x);
                x = Math.min(x,document.documentElement.clientWidth-box.clientWidth);
  
                y = Math.max(0,y);
                y = Math.min(y,document.documentElement.clientHeight-box.clientHeight);

              
                el.style.left = x+'px';
                el.style.top = y+'px';

                    
    
                 e.preventDefault();
                }
                document.addEventListener('mousemove',move);
                document.addEventListener('mouseup',function(){
                    document.removeEventListener('mousemove',move);
                      
            },{
                once:true
            });
        })
    
        }

是不是很简单啊，下面扩展一下碰撞检测的方法：

function isContact(el1,el2){
            //获取四条边的位置
            let el1Pos = el1.getBoundingClientRect();
            let el2Pos = el2.getBoundingClientRect();
            if(//碰上
                el1Pos.right>el2Pos.left&&
                el1Pos.left<el2Pos.right&&
                el1Pos.bottom>el2Pos.top&&
                el1Pos.top<el2Pos.bottom
            ){
                return true;
            }else{
                return false;
            }
        }

这里很好理解，简单解释一下getBoundingClientRect():
该方法是返回元素的大小及其相对于视口的位置，包含四个只读属性：left、right、top、bottom。

详细可以参考MDN上对该方法的介绍：https://developer.mozilla.org/zh-CN/docs/Web/API/Element/getBoundingClientRect

JS实现拖拽功能

推荐阅读更多精彩内容