html中鼠标拖拽的实现

最新推荐文章于 2024-04-03 08:57:23 发布

麦田里的守望

最新推荐文章于 2024-04-03 08:57:23 发布

阅读量1.8k

点赞数 1

分类专栏： html代码文章标签： html

本文链接：https://blog.csdn.net/qq_40281230/article/details/78119098

版权

html代码专栏收录该内容

8 篇文章 0 订阅

订阅专栏

图片上方有一个移动鼠标，可以任意拖拽到任何地方
实现的代码如下:

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