滑鼠點選圖片移動時圖片移動，鬆開滑鼠，再移動滑鼠時，圖片仍隨著滑鼠移動問題
阿新 • • 發佈：2018-12-18
解決方法見紅色程式碼，在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>