JavaScript實現拖拽功能
阿新 • • 發佈:2020-02-13
本文例項為大家分享了JavaScript實現拖拽功能的具體程式碼,供大家參考,具體內容如下
盒子拖拽—運用到的有onmousedown事件,onmousemove事件以及onmouseup事件
1、當滑鼠點選下去的時候我們需要獲取滑鼠所在位置的橫縱座標,然後獲取盒子的離頁面的橫縱方向的距離
2、計算出滑鼠相對盒子的距離
3、當滑鼠移動的時候,獲取滑鼠移動的距離,在永滑鼠此刻的位置減去滑鼠相對盒子的距離,獲得的是盒子此刻的座標位置
4、將這個位置賦值給盒子
5、滑鼠抬起,清除滑鼠移動事件;
程式碼:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>滑鼠拖拽</title> <style> .box{ background-color: pink; width:200px; height:200px; border-radius: 50%; position: absolute; top:20px; left:100px; } </style> </head> <body> <div class="box"> </div> <script> window.onload = function(){ var box = document.getElementsByClassName('box')[0]; function drag (ele){ ele.onmousedown = function(e){ var e = e || window.event; //此處是為了相容IE,因為IE中事件物件是作為全域性物件( window.event )存在的; var pageX = e.pageX || e.clientX + document.documentElement.scrollLeft; var pageY = e.pageY || e.clientY + document.documentElement.scrollTop; //獲取滑鼠相對盒子的位置; var boxX = pageX - box.offsetLeft; var boxY = pageY - box.offsetTop; document.onmousemove = function(e){ var e = e || window.event; var pageX = e.pageX || e.clientX + document.documentElement.scrollLeft; var pageY = e.pageY || e.clientY + document.documentElement.scrollTop; //將滑鼠當前的座標值減去滑鼠相對盒子的位置,得到盒子當時的位置並將其賦值給盒子,實現移動效果 box.style.left = pageX - boxX +'px'; box.style.top = pageY - boxY + 'px'; } }; document.onmouseup = function () { //清除盒子的移動事件; document.onmousemove = null; }; } ; drag(box) } </script> </body> </html>
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。