JS拖动元素-优快云博客

本文链接：https://blog.youkuaiyun.com/sanflow/article/details/107757522

js代码

       drag('divone')    //需要哪个盒子移动就将哪个盒子类名传入
        function drag(name){
            divone = document.getElementsByClassName(name);
            for(var i = 0; i<divone.length;i++){
                divone[i].onmousedown = function(e){
                    var dive = e || event;
                    var distanceX = dive.clientX - e.target.offsetLeft//鼠标点击盒子X轴的位置减去盒子距离左边的位置；得到在盒子内点击的位置
                    var distanceY = dive.clientY - e.target.offsetTop//鼠标点击盒子Y轴的位置减去盒子距离顶部的位置；得到在盒子内点击的位置
                    document.onmousemove = function(ev){
                        var dive = ev || event
                        ev.target.style.top = dive.clientY - distanceY +'px';   //移动时的Y位置减去鼠标在盒子内点击的位置；得到当前位置
                        ev.target.style.left = dive.clientX - distanceX +'px';  //移动时的X位置减去鼠标在盒子内点击的位置；得到当前位置
                    }
                    document.onmouseup = function(){
                        document.onmousemove = null;
                        document.onmouseup = null;
                    }
                }
            }
        }

全部代码

<!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>
        *{
            padding: 0;
            margin: 0;
        }
        html,body{
            width: 100%;
            height: 100%;
        }
        .divone{
            width: 150px;
            height: 150px;
            position: absolute;
            background: #222;
        }
    </style>
</head>
<body>
    <div class="divone"></div>
    <script>
        drag('divone')
        function drag(name){
            divone = document.getElementsByClassName(name);
            for(var i = 0; i<divone.length;i++){
                divone[i].onmousedown = function(e){
                    var dive = e || event;
                    var distanceX = dive.clientX - e.target.offsetLeft//鼠标点击盒子X轴的位置减去盒子距离左边的位置；得到在盒子内点击的位置
                    var distanceY = dive.clientY - e.target.offsetTop//鼠标点击盒子Y轴的位置减去盒子距离顶部的位置；得到在盒子内点击的位置
                    document.onmousemove = function(ev){
                        var dive = ev || event
                        ev.target.style.top = dive.clientY - distanceY +'px';   //移动时的Y位置减去鼠标在盒子内点击的位置；得到当前位置
                        ev.target.style.left = dive.clientX - distanceX +'px';  //移动时的X位置减去鼠标在盒子内点击的位置；得到当前位置
                    }
                    document.onmouseup = function(){
                        document.onmousemove = null;
                        document.onmouseup = null;
                    }
                }
            }
        }
    </script>
</body>
</html>

注：要移动的盒子一定要加定位