js拖拽效果的原理及实现

最新推荐文章于 2023-11-28 11:58:47 发布

m0_46383567

最新推荐文章于 2023-11-28 11:58:47 发布

阅读量263

点赞数 1

本文链接：https://blog.csdn.net/m0_46383567/article/details/105341153

版权

一、拖拽的流程
1、鼠标按下
2、鼠标移动
3、鼠标松开
二、拖拽时触发的事件
1、按下鼠标

要拖拽的元素.onmousedown=function(e1){

}

2、移动鼠标

document.onmousemove=function(e){

}

3、松开鼠标

document.onmouseup=function(e){

}

三、拖拽的原理
1、不管是移动鼠标还是松开鼠标，都是在按下鼠标的基础上完成操作，所以在按下鼠标时开始监听移动鼠标事件以及松开鼠标事件

2、拖拽元素最关键的实际是移动鼠标的过程，元素不管怎么移动都是相对可视窗口的位置，也就是元素的移动是通过left和top这两个属性来移动的，所以在CSS样式中需要给元素添加定位

3、在鼠标松开时，鼠标按下事件和鼠标移动事件都将不在继续执行，所以是需要删除的

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width:50px;
            height: 50px;
            background-color: red;
            position: absolute;
        }
    </style>
</head>
<body>
    <div></div>
    <script>
   		//获取div元素
        var div=document.querySelector("div");
        // 按下时开始监听在文档中鼠标移动的事件
        // 开始监听鼠标松开键的事件
        div.onmousedown=function(e1){
            // 当鼠标在文档移动时，不能再div上移动，因为鼠标可能离开div，造成无法拖拽
            document.onmousemove=function(e){
                // 当鼠标移动时，将当前鼠标相对视口的坐标赋值给元素的left和top
                // 因为我们需要在按下的位置拖拽，因此我们还需要获取按下键鼠标相对div的左上角位置
                // 使用当前鼠标位置减去这个相对元素的左上角位置，保证鼠标所按位置拖拽
                div.style.left=e.clientX-e1.offsetX+"px";
                div.style.top=e.clientY-e1.offsetY+"px";
            }
            // 当释放鼠标键时，删除鼠标移动事件和删除鼠标释放事件
            document.onmouseup=function(){
                document.onmousemove=null;
                document.onmouseup=null;
            }
        }

以上只能做到一个div在文档中进行拖拽，要想完成多个div拖拽的效果我们可以将函数封装在一个js文件夹里面

var Utils=(function(){
    return {
    dragOn(elem){
            elem.self=this;
            elem.addEventListener("mousedown",this.mouseHandler);
        },
        dragOff(elem){
            elem.removeEventListener("mousedown",this.mouseHandler);
        },
        mouseHandler(e){
            if(e.type==="mousedown"){
                e.preventDefault();
                // this   是按下的元素
                // document.div=this;
                document.div=e.target;
                document.offset={x:e.offsetX,y:e.offsetY};
                document.self=this.self;
                document.addEventListener("mousemove",this.self.mouseHandler)
                document.addEventListener("mouseup",this.self.mouseHandler)
            }else if(e.type==="mousemove"){
                // this  document
                // this.div  按下的元素
                document.div.style.left=e.clientX-document.offset.x+"px";
                document.div.style.top=e.clientY-document.offset.y+"px";
            }else if(e.type==="mouseup"){
                // this document
                document.removeEventListener("mousemove",document.self.mouseHandler)
                document.removeEventListener("mouseup",document.self.mouseHandler)
            }
        }

    }
})();

再引用到页面中

var divs=document.querySelectorAll("div");
        for(var i=0;i<divs.length;i++){
           Utils.dragOn(divs[i]);
        }

m0_46383567

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js拖拽效果的原理及实现

一、拖拽的流程1、鼠标按下2、鼠标移动3、鼠标松开二、拖拽时触发的事件1、按下鼠标要拖拽的元素.onmousedown=function(e1){}2、移动鼠标document.onmousemove=function(e){}3、松开鼠标document.onmouseup=function(e){}三、拖拽的原理1、不管是移动鼠标还是松开鼠标，都是在按...
复制链接

扫一扫