原生js实现拖拽功能

Posted 小安快跑

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了原生js实现拖拽功能相关的知识,希望对你有一定的参考价值。

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

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、onmouseup:绑定到document上,主要是为了防止鼠标移动过快,鼠标超出元素范围

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

 

考虑边界

代码实现:

window.onload=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只能获取不能更改

以上是关于原生js实现拖拽功能的主要内容,如果未能解决你的问题,请参考以下文章

Drag,js实现鼠标拖拽元素

Drag,js实现鼠标拖拽元素

js原生代码实现鼠标拖拽(超简单)

04:JS 拖拽功能的实现

如何使用jQuery Draggable和Droppable实现拖拽功能

简单的鼠标拖拽效果(原生js实现)