拖拽事件

最新推荐文章于 2025-05-19 15:11:52 发布

凯凯王

最新推荐文章于 2025-05-19 15:11:52 发布

阅读量159

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/fzhwk/article/details/78112764

<style>
    body{
        margin: 10px;
        padding: 0px;

    }
    div{
        position: absolute;
        top: 100px;
        width: 300px;
        left: 80px;
        height: 300px;
        background-color: #A9BF8E;          
    }
    body: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;
    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>