鼠標對操作對象實現拖拽：
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <title></title> | |
| <style> | |
| body{ | |
| margin: 0; | |
| padding: 0; | |
| } | |
| div{ | |
| position: absolute; | |
| top: 200px;/*div的y軸*/ | |
| left: 150px;/*div的x軸*/ | |
| width: 300px; | |
| height: 200px; | |
| background-color: gray; | |
| } | |
| 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"); | |
| //實時更新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> | |
| </html> | |