封装js拖拽函数

最新推荐文章于 2022-02-24 19:46:58 发布

海里的蓝天

最新推荐文章于 2022-02-24 19:46:58 发布

阅读量229

点赞数 1

分类专栏： js

本文链接：https://blog.csdn.net/weixin_43790802/article/details/92784813

版权

js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

回顾js练习拖拽（未兼容低版本ie浏览器）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .box1{
        width:100px;
        height:100px;
        background:red;
        position:absolute;
        z-index: 10;
    }
    .box2{
        width:100px;
        height:100px;
        position:absolute;
        top:200px;
        left:300px;
        background:black;
    }
    
    </style>
</head>
<body>
    <div class="box1" id="item"></div>
    <div class="box2"></div>
</body>
</html>
<script>
window.onload=function(){
    //传入类名，id或者标签名且传入的是字符串
    function drag(str){  
        var dragDom=document.getElementById(str) || document.getElementsByClassName(str)[0] || document.getElementsByTagName(str)[0];
        dragDom.onmousedown=function(e){ 
            e=e||window.e;   
            window.e?e.returnValue = false:e.preventDefault(); //取消浏览器默认事件
            var dragDomLeft=dragDom.offsetLeft;
            var dragDomTop=dragDom.offsetTop;
            var mouseLeft=e.clientX;
            var mouseTop=e.clientY;
            var ol=mouseLeft-dragDomLeft;
            var ot= mouseTop-dragDomTop;
            document.onmousemove=function(event){
                event=event||window.event;      
                var Left=event.clientX;
                var Top=event.clientY;
                dragDom.style.left=(Left-ol)+"px";
                dragDom.style.top=(Top-ot)+"px";
            };
            document.onmouseup=function(){
                document.onmousemove=null;
                document.onmouseup=null;
            };
        }
    };
    drag('box1');
    drag('box2');
}

</script>