JavaScript 方块拖拽简单函数

最新推荐文章于 2021-10-15 01:46:25 发布

HuangJiaxinZ

最新推荐文章于 2021-10-15 01:46:25 发布

阅读量278

点赞数

分类专栏： JavaScript 文章标签： JavaScript 方块拖拽简单函数 js方块拖拽

本文链接：https://blog.csdn.net/HuangJiaxinZ/article/details/90607173

版权

JavaScript 专栏收录该内容

11 篇文章 2 订阅

订阅专栏

//JavaScript 方块拖拽简单函数
<!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>
</head>
<body>
    <div style="width: 100px;height:100px;background:red;position:absolute;left:0;top:0;"></div>
    <script>
        /*
        简单的方块拖拽函数，一点击可以移动方块移动，鼠标点完后，方块不移动3
        */
        function drag(elem){
        var disX,
            disY;

        elem.onmousedown = function(e){

            disX = e.pageX - parseInt(elem.style.left);  //disX 为鼠标x轴位置到方块的最左边的距离
            disY = e.pageY - parseInt(elem.style.top);

            /*鼠标点击事件，document改为div也行，但是会出现鼠标一些小问题，自行测试*/
            document.onmousemove = function(e){
                var event = e|| window.event;       //解决event(事件) 在不同浏览器的兼容性问题
                
                elem.style.left = event.pageX -disX +"px";  //调整方块的left值 
            	 // -disX 是为了使鼠标不会在一点击就在原地而不是一点击鼠标，方块的左上角就立刻定位到鼠标上
            	 
                elem.style.top = event.pageY -disY +"px";   //道理同上
            }

            /*鼠标点完，使onmousemove取消*/    
            document.onmouseup = function(){
                    document.onmousemove = null;       
                }
            }
        }

        var div = document.getElementsByTagName("div")[0]; 
        drag(div);
    </script>
    
</body>
</html>