js拖拽效果
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>js拖拽效果</title> 6 </head> 7 <body> 8 <script type="text/javascript"> 9 var oDiv = document.getElementById('login'); 10 oDiv.onmousedown = function(e){ 11 var event = event || window.event;//window.event兼容IE,當(dāng)事件發(fā)生時(shí)有效 12 13 var diffX = event.clientX - oDiv.offsetLeft;//獲取鼠標(biāo)點(diǎn)擊的位置到所選對(duì)象的邊框的水平距離 14 var diffY = event.clientY - oDiv.offsetTop; 15 16 document.onmousemove = function(e){//需設(shè)為document對(duì)象才能作用于整個(gè)文檔 17 var e = e||window.event; 18 oDiv.style.left = e.clientX - diffX +'px';//style.left表示所選對(duì)象的邊框到瀏覽器左側(cè)距離 19 oDic.style.top = e.client - diffY +'px'; 20 } 21 document.onmouseup = function(){ 22 oDiv.onmousemove = null;//清除鼠標(biāo)釋放時(shí)的對(duì)象移動(dòng)方法 23 oDiv.onmouseup = null; 24 } 25 } 26 </script> 27 </body> 28 </html>
posted on 2016-12-27 18:10 紸啶呮媞璐濄 閱讀(111) 評(píng)論(0) 收藏 舉報(bào)
浙公網(wǎng)安備 33010602011771號(hào)