原生js实现拖拽功能

爱被打了一巴掌 2021-12-15 13:57 468阅读 0赞

如果要设置物体拖拽，必须使用三个事件，分别是：

1、onmousedown:鼠标按下事件

2、onmousemove:鼠标移动事件

3、onmouseup:鼠标抬开事件

拖拽的原理：根据鼠标的移动来移动被拖拽的元素。鼠标的移动就是鼠标x、y坐标的变化，元素的移动就是position的top和left的变化。

当然并不是任何时候移动鼠标都要使元素移动，应该判断鼠标左键是否被按下，以及是否在可拖拽元素上按下的。

基本思路：

拖拽状态 = 0鼠标在元素上按下的时候{   
      　　拖拽状态 = 1   
     　　 记录下鼠标的x和y坐标   
      　　记录下元素的x和y坐标   
      }  
     鼠标在元素上移动的时候{   
      　　如果拖拽状态是0就什么也不做。   
      　　如果拖拽状态是1，那么   
      　　元素y = 现在鼠标y - 原来鼠标y + 原来元素y   
      　　元素x = 现在鼠标x - 原来鼠标x + 原来元素x   
      }    
     鼠标在任何时候放开的时候{   
      　　拖拽状态 = 0   
    }

三个事件分别绑定的对象是什么？

（1）onmousedown：绑定到被拖拽元素上

（2）onmousemove：绑定到document上，主要是为了防止鼠标移动过快，鼠标超出元素范围

（3）onmouseup：绑定到document上，主要是为了防止鼠标移动过快，被移除目标元素，所以无法处理鼠标松开事件

onmousemove、onmouseup是全局区域，也就是整个文档通用，应该使用document对象而不是目标对象，否则目标对象只能往右方或者下方移动

考虑边界

代码实现：

window.οnlοad=function(){
        var dragObj=document.getElementById('box');
        dragObj.style.left='0px';
        dragObj.style.top='0px';
                    
        var mouseX,mouseY,objX,objY;
        var dragging=false;
        var diffX,diffY;
    
        dragObj.onmousedown=function(event){
            var event=event||window.event;        
            dragging=true;
                        
            mouseX=event.clientX;//初始位置时鼠标的坐标
            mouseY=event.clientY;
            objX=dragObj.offsetLeft;//元素的初始位置
            objY=dragObj.offsetTop;
                        
            diffX=mouseX-objX;//相当于鼠标距物体左边的距离
            diffY=mouseY-objY;
         }       
        document.onmousemove=function(event){
            var event=event||window.event;
            if(dragging){
                //元素左边距等于鼠标移动的宽度加上元素本身的位置
                dragObj.style.left=event.clientX-mouseX+objX+"px";
                dragObj.style.top=event.clientY-mouseY+objY+"px";
                    
                 //设置边界
                if((event.clientX-diffX)<0){
        //鼠标到浏览器左边距小于鼠标到obj的左边距
                    dragObj.style.left=0+"px";
                }
                //window.innerWidth浏览器显示区域的宽度，dragObj.offsetWidth物体宽度
                else if((event.clientX-diffX)>(window.innerWidth-dragObj.offsetWidth)){
                    dragObj.style.left=window.innerWidth-dragObj.offsetWidth+"px";
                }
                if((event.clientY-diffY)<0){
                    dragObj.style.top=0+"px";
                }
                else if((event.clientY-diffY)>(window.innerHeight-dragObj.offsetHeight)){
                    dragObj.style.top=window.innerHeight-dragObj.offsetHeight+"px";
                }
            } 
        }
        document.onmouseup=function(){
            dragging=false;
        }
    }
    </script>

**obj.offsetLeft与obj.style.left的区别：**

（1）offsetLeft：获取当前对象左侧距离父对象左侧的值

style.left：获取相对于具有定位属性的父对象的左边距。

（2）如果父对象的position定义为relative,子对象的position定义为absolute，那么子对象的style.left的值是相对于父对象的值,等同于offsetLeft的值.

（3）offsetLeft返回的是数值，而style.left返回的是数字字符串，在使用时需要parseInt(style.left)；

（4）style.left可以设置或更改，而offsetLeft只能获取不能更改

转载于:https://www.cnblogs.com/xiaoan0705/p/10571991.html