前端设计之拖拽事件

首先 :运用了 onmousedown = “”、onmouseup =“”、onmousemove =“”;

其次:进行分析
/*
* 分析:
* 获取鼠标实时移动的坐标;m_move_x,m_move_y
* 鼠标按下时的坐标;m_down_x,m_down_y
* div的坐标;dx,dy
* 鼠标按下时,鼠标与div的偏移量;md_x,md_y
* div的新坐标;ndx,ndy
*/

最后:也可以画一张简单的分析图如下:
前端设计之拖拽事件_第1张图片

程序如下:

<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>

你可能感兴趣的:(前端,javascript,JavaScript)