javaScript基础拖拽

来源：互联网发布：python高级编程第二版编辑：程序博客网时间：2024/05/22 07:06
拖拽事件

图片拖拽
<!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>
阅读全文
0 0