鼠标移动div效果:鼠标拖曳效果

通过简单的鼠标事件,获取实时的鼠标坐标,和实时的div坐标,实现鼠标对div的拖曳效果。

注意事项:
1.event监听事件:有同步性,信息的一种及时交互。
2.获取鼠标实时坐标的三种方法:clientX,screenX,pageX.
3.获取div坐标
dx = move_div.offsetLeft;
dy = move_div.offsetTop;

一点心得:
在做程序的时候,先统计好预计要得到的效果,然后根据需要达成的效果,一个一个的完成。
简而言之就是,你要划分好步奏,一个一个来。

<!DOCTYPE html>
<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>
以上是老师版,以下是个人版。






<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            body{
                margin: 0;
                padding: 0;
            }
            div{
                border: 1px solid #000000;
                width: 300px;
                height: 300px;
                position: absolute;
            }
            div:hover{
                cursor: move;
            }
        </style>
        <script>
            //变量声明
            //鼠标按下时的坐标
            //鼠标移动时的坐标
            //div的实时坐标
            //div的最终坐标
            //div与鼠标按下时坐标的偏移量
            var isDown=false;
            var move_div;//操控的div对象
            var mouse_down_x,mouse_down_y,mouse_move_y,mouse_move_x,div_x,div_y,new_div_x,new_div_y,mouse_div_x,mouse_div_y;



            //鼠标按下

            function d(){
                isDown=true;
            //鼠标按下时的坐标
            mouse_down_x=event.clientX;
            mouse_down_y=event.clientY;
            //div的实时坐标
            move_div=document.getElementById("move_div");
            div_x=move_div.offsetLeft;
            div_y=move_div.offsetTop;
            //div与鼠标按下时坐标的偏移量
            mouse_div_x=mouse_down_x-div_x;
            mouse_div_y=mouse_down_y-div_y


            }


            //鼠标移动

            function m(){
            //鼠标移动时的坐标

                mouse_move_x=event.clientX;
                mouse_move_y=event.clientY;
            //div的实时坐标

                move_div=document.getElementById("move_div");
                div_x=move_div.offsetLeft;
                div_y=move_div.offsetTop;



            if(isDown){

            //div的最终坐标

                new_div_x=mouse_move_x-mouse_div_x;
                new_div_y=mouse_move_y-mouse_div_y;

                move_div.style.top=new_div_y+"px";
                move_div.style.left=new_div_x+"px";

            }

            }

            //鼠标释放

            function u(){
                isDown=false;

            }

        </script>
    </head>
    <body>
        <div id="move_div" onmousedown="d()" onmousemove="m()" onmouseup="u()">

        </div>
    </body>
</html>
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值