鼠标拖拽的实现

来源：互联网发布：杭州seo公司哪家好编辑：程序博客网时间：2024/06/05 05:21
    <style>        body{            margin: 0;            padding: 0;        }        div{            position: absolute;            width: 350px;            height: 500px;            background-color: cornflowerblue;            top: 150px;            left: 150px;        }        div:hover{            cursor: move;        }    </style>    <script >        /*         *分析：         * 获取鼠标实时移动的坐标：m_move_x,m_move_y         * 鼠标按下时的坐标：m_down_x,m_down_y         * div的坐标         * 鼠标按下时，鼠标与div的偏移量：md_x,md_y         * div的新坐标：ndx,ndy         */        var isDown = false;        var move_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("mov_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 up(){            isDown = false;        }        //鼠标移动        function move(){            move_div = document.getElementById("mov_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";            }        }    </script></head><body>    <div id="mov_div" onmousedown="down()" onmouseup="up()" onmousemove="move()"></div></body>
阅读全文
0 0