解决方法见红色代码,在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>