js鼠标拖拽多个div

最新推荐文章于 2022-11-11 18:43:49 发布

Flower！important

最新推荐文章于 2022-11-11 18:43:49 发布

阅读量1.2k

点赞数

本文链接：https://blog.csdn.net/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>

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

Flower！important

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
js鼠标拖拽多个div

js代码 drag('divone') //需要哪个盒子移动就将哪个盒子类名传入 function drag(name){ divone = document.getElementsByClassName(name); for(var i = 0; i<divone.length;i++){ divone[i].onmousedown = function(e){ .
复制链接

扫一扫