鼠标点击图片移动时图片移动,松开鼠标,再移动鼠标时,图片仍随着鼠标移动问题

解决方法见红色代码,在mousedown事件下加入红色部分的代码,即禁止拖动img图片。原因不明,但是好使,哈哈。

下面的整个代码为实现 鼠标点击图片移动图片,松开鼠标停止移动 功能。

//鼠标拖动
var oDiv = document.getElementById("img_screen");

var isDown = false;
var m_move_x,m_move_y,m_down_x,m_down_y,dx,dy,md_x,md_y,ndx,ndy;
oDiv.onmousedown = function(event){
    
    event.preventDefault();
    
    //鼠标按下时的坐标与div坐标的偏移量
    isDown = true;

    //获取鼠标按下时的坐标
    m_down_x = event.pageX;
    m_down_y = event.pageY;
    //获取div的坐标
    dx = oDiv.offsetLeft;
    dy = oDiv.offsetTop;
    //获取鼠标与div偏移量
    md_x = m_down_x - dx;
    md_y = m_down_y - dy;
}
document.onmousemove = function(event){
    //实时更新div坐标
    dx = oDiv.offsetLeft;
    dy = oDiv.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对象
        oDiv.style.left = ndx+"px";
        oDiv.style.top = ndy+"px";
    }
}
document.onmouseup = function(){
    isDown = false;
}

<body>

<img id="img_screen" src="../xx.jpg"/>

</body>

猜你喜欢

转载自blog.csdn.net/wangchaohpu/article/details/83584245