（SDM）前段-鼠标拖拽

来源：互联网发布：js构造函数与原型对象编辑：程序博客网时间：2024/06/05 05:17

首先是代码：

<html>    <head>        <meta charset="UTF-8">        <title></title>        <style>            body{                margin: 0;                padding: 0;            }            div{                position: absolute;                top: 200px;/*div的y轴*/                left: 150px;/*div的x轴*/                width: 300px;                height: 200px;                background-color: gray;            }            div:hover{                cursor: move;            }        </style>        <script>            /*             * 分析：             * 获取鼠标实时移动的坐标；m_move_x,m_move_y             * 鼠标按下时的坐标；m_down_x,m_down_y             * div的坐标；dx,dy             * 鼠标按下时，鼠标与div的偏移量；md_x,md_y             * div的新坐标；ndx,ndy             */            var isDown = false;//记录鼠标状态            var move_div ;//要操作的div对象            var m_move_x,m_move_y,m_down_x,m_down_y,dx,dy,md_x,md_y,ndx,ndy;            //鼠标按下            function down(){                move_div = document.getElementById("move_div");                isDown = true;                //获取鼠标按下时坐标                m_down_x = event.pageX;                m_down_y = event.pageY;                //获取div坐标                dx = move_div.offsetLeft;                dy = move_div.offsetTop;                //获取鼠标与div偏移量                md_x = m_down_x - dx;                md_y = m_down_y - dy;            }            //鼠标移动            function move(){                move_div = document.getElementById("move_div");                //实时更新div的坐标                dx = move_div.offsetLeft;                dy = move_div.offsetTop;                //获取鼠标移动实时坐标                m_move_x = event.pageX;                m_move_y = event.pageY;                //鼠标按下时移动才触发                if(isDown){                    //获取新div坐标，鼠标实时坐标 - 鼠标与div的偏移量                    ndx = m_move_x - md_x;                    ndy = m_move_y - md_y;                    //把新div坐标值赋给div对象                    move_div.style.left = ndx+"px";                    move_div.style.top = ndy+"px";                }            }            //鼠标释放            function up(){                isDown = false;            }        </script>    </head>    <body>        <div id="move_div" onmousedown="down()" onmouseup="up()" onmousemove="move()"></div>    </body></html>

这里写图片描述
【在使用好多登录界面，都可以使用这种鼠标拖拽，对登录界面进行各种移动以及关闭。】渣新第一次写，虚心求教~！

阅读全文

0 0