javaScript基础拖拽-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_40351096/article/details/78095724

本文介绍了一个简单的HTML页面，通过JavaScript实现了一个可拖动的灰色方块。利用鼠标按下、移动和释放事件，调整div的位置，使其能够随着鼠标移动而移动。文章详细解释了拖拽功能的实现原理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

拖拽事件

图片拖拽


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            body{
                margin: 0;
                padding: 0;
            }
            div{
                position: absolute;
                width: 300px;
                height: 250px;
                background-color: gray;
                margin: center;


            }
            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")
                //获取实时移动坐标
                m_move_x=event.pageX;
                m_move_y=event.pageY;

                //获取新div的坐标
                ndx=m_move_x-md_x;
                ndy=m_move_y-md_y;


                //鼠标按下移动才触发
                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" onmouseup="up()" onmousedown="down()" onmousemove="move()"></div>

    </body>
</html>