本文實(shí)例為大家分享了js實(shí)現(xiàn)鼠標(biāo)拖拽事件的具體代碼，供大家參考，具體內(nèi)容如下
<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> /* * 分析： * 獲取鼠標(biāo)實(shí)時移動的坐標(biāo)；m_move_x,m_move_y * 鼠標(biāo)按下時的坐標(biāo)；m_down_x,m_down_y * div的坐標(biāo)；dx,dy * 鼠標(biāo)按下時，鼠標(biāo)與div的偏移量；md_x,md_y * div的新坐標(biāo)；ndx,ndy */ var isDown = false;//記錄鼠標(biāo)狀態(tài) 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; //鼠標(biāo)按下 function down(){ move_div = document.getElementById("move_div"); isDown = true; //獲取鼠標(biāo)按下時坐標(biāo) m_down_x = event.pageX; m_down_y = event.pageY; //獲取div坐標(biāo) dx = move_div.offsetLeft; dy = move_div.offsetTop; //獲取鼠標(biāo)與div偏移量 md_x = m_down_x - dx; md_y = m_down_y - dy; } //鼠標(biāo)移動 function move(){ move_div = document.getElementById("move_div"); //實(shí)時更新div的坐標(biāo) dx = move_div.offsetLeft; dy = move_div.offsetTop; //獲取鼠標(biāo)移動實(shí)時坐標(biāo) m_move_x = event.pageX; m_move_y = event.pageY; //鼠標(biāo)按下時移動才觸發(fā) if(isDown){ //獲取新div坐標(biāo)，鼠標(biāo)實(shí)時坐標(biāo) - 鼠標(biāo)與div的偏移量 ndx = m_move_x - md_x; ndy = m_move_y - md_y; //把新div坐標(biāo)值賦給div對象 move_div.style.left = ndx+"px"; move_div.style.top = ndy+"px"; } } //鼠標(biāo)釋放 function up(){ isDown = false; } </script> </head> <body> <div id="move_div" onmousedown="down()" onmouseup="up()" onmousemove="move()"></div> </body></html>以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持錯新站長站。
新聞熱點(diǎn)
疑難解答
圖片精選
