效果圖：
代碼如下：
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #div{ width: 200px; height: 200px; background: green; position: absolute; } #div2{ width: 200px; height: 200px; background: gold; position: absolute; top: 200px; left: 200px; } </style> </head> <body> <div id="div"> </div> <div id="div2"></div> <script> window.onload=function(){ var div=document.getElementById("div"); div.onmousedown=function(ev){ var e=window.event || ev; //var Mydiv=document.getElementById("div"); //獲取到鼠標(biāo)點(diǎn)擊的位置距離div左側(cè)和頂部邊框的距離； var oX=e.clientX-div.offsetLeft; var oY=e.clientY-div.offsetTop; //當(dāng)鼠標(biāo)移動(dòng)，把鼠標(biāo)的偏移量付給div document.onmousemove=function(ev){ //計(jì)算出鼠標(biāo)在XY方向上移動(dòng)的偏移量，把這個(gè)偏移量加給DIV的左邊距和上邊距，div就會(huì)跟著移動(dòng) var e=window.event|| ev; div.style.left=e.clientX-oX+"px"; div.style.top=e.clientY-oY+"px"; } //當(dāng)鼠標(biāo)按鍵抬起，清除移動(dòng)事件 document.onmouseup=function(){ document.onmousemove=null; document.onmouseup=null; } } var div2=document.getElementById("div2"); div2.onmousedown=function(ev){ var e=window.event || ev; //var Mydiv=document.getElementById("div"); //獲取到鼠標(biāo)點(diǎn)擊的位置距離div左側(cè)和頂部邊框的距離； var oX=e.clientX-div2.offsetLeft; var oY=e.clientY-div2.offsetTop; //當(dāng)鼠標(biāo)移動(dòng)，把鼠標(biāo)的偏移量付給div document.onmousemove=function(ev){ //計(jì)算出鼠標(biāo)在XY方向上移動(dòng)的偏移量，把這個(gè)偏移量加給DIV的左邊距和上邊距，div就會(huì)跟著移動(dòng) var e=window.event|| ev; div2.style.left=e.clientX-oX+"px"; div2.style.top=e.clientY-oY+"px"; } //當(dāng)鼠標(biāo)按鍵抬起，清除移動(dòng)事件 document.onmouseup=function(){ document.onmousemove=null; document.onmouseup=null; } } } </script> </body></html>以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持武林網(wǎng)！
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
