JS 实现div元素的拖动

来源：互联网发布：python f.close 编辑：程序博客网时间：2024/05/22 16:42

JS 实现div元素的拖动

功能描述：
在浏览器窗口有一个div盒子，用鼠标点击盒子，按下进行拖动，当鼠标弹起时，该div就移动到此位置了。

实现代码：

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <style>        *{            margin: 0;            padding: 0;        }        .div1{            width: 100px;            height: 100px;            background-color: red;            position: absolute;            left: 0;            top: 0;        }    </style>    <script>        //全局变量，标记是否鼠标按下        var isMouseDown=false;        //全局div        var div;        var leftX=0;        var topY=0;        window.onload=function(){            //增加鼠标按下事件            div=document.getElementById("div1");            div.onmousedown=mouseDownAction;            document.onmousemove=mouseMoveAction;            div.onmouseup=mouseUpAction;        }        /**         *鼠标按下         */        function mouseDownAction(e){            isMouseDown=true;            //记录下鼠标点击的时候的位置            leftX= e.offsetX;            topY= e.offsetY;        }        /**         *鼠标移动         */        function mouseMoveAction(e){            if(isMouseDown){                div.style.left= e.pageX-leftX+"px";                div.style.top= e.pageY-topY+"px";            }        }        /**         *鼠标弹起来         */        function mouseUpAction(e){            isMouseDown=false;        }    </script></head><body><div class="div1" id="div1"></div></body></html>

阅读全文

0 0