js实现鼠标拖拽功能基本思路
生活随笔
收集整理的這篇文章主要介紹了
js实现鼠标拖拽功能基本思路
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
如果要設置物體拖拽，那么必須使用三個事件，并且這三個事件的使用順序不能顛倒。
? 拖拽的基本原理就是根據鼠標的移動來移動被拖拽的元素。鼠標的移動也就是x、y坐標的變化;元素的移動就是style.position的 top和left的改變。當然，并不是任何時候移動鼠標都要造成元素的移動，而應該判斷鼠標左鍵的狀態是否為按下狀態，是否是在可拖拽的元素上按下的。
基本思路如下：[html]?view plaincopy
部分實例代碼：
HTML部分[html]?view plaincopy
CSS部分
[html]?view plaincopy
js部分
[html]?view plaincopy源碼：
<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"><title></title><style>.calculator {position: absolute; /*設置絕對定位，脫離文檔流，便于拖拽*/ display: block;width: 218px;height: 280px;cursor: move; /*鼠標呈拖拽狀*/ }</style> </head> <body> <div class="calculator" id="drag">**********</div> </body> </html><script>window.onload = function() {//拖拽功能(主要是觸發三個事件：onmousedown\onmousemove\onmouseup) var drag = document.getElementById('drag');//點擊某物體時，用drag對象即可，move和up是全局區域，也就是整個文檔通用，應該使用document對象而不是drag對象(否則，采用drag對象時物體只能往右方或下方移動) drag.onmousedown = function(e) {var e = e || window.event; //兼容ie瀏覽器 var diffX = e.clientX - drag.offsetLeft; //鼠標點擊物體那一刻相對于物體左側邊框的距離=點擊時的位置相對于瀏覽器最左邊的距離-物體左邊框相對于瀏覽器最左邊的距離 var diffY = e.clientY - drag.offsetTop;/*低版本ie bug:物體被拖出瀏覽器可是窗口外部時，還會出現滾動條， 解決方法是采用ie瀏覽器獨有的2個方法setCapture()\releaseCapture(),這兩個方法， 可以讓鼠標滑動到瀏覽器外部也可以捕獲到事件，而我們的bug就是當鼠標移出瀏覽器的時候， 限制超過的功能就失效了。用這個方法，即可解決這個問題。注：這兩個方法用于onmousedown和onmouseup中*/ if(typeof drag.setCapture!='undefined'){drag.setCapture();}document.onmousemove = function(e) {var e = e || window.event; //兼容ie瀏覽器 var left=e.clientX-diffX;var top=e.clientY-diffY;//控制拖拽物體的范圍只能在瀏覽器視窗內，不允許出現滾動條 if(left<0){//left=0; }else if(left >window.innerWidth-drag.offsetWidth){left = window.innerWidth-drag.offsetWidth;//left = window.innerWidth; }if(top<0){//top=0; }else if(top >window.innerHeight-drag.offsetHeight){top = window.innerHeight-drag.offsetHeight;//top = window.innerHeight; }//移動時重新得到物體的距離，解決拖動時出現晃動的現象 drag.style.left = left+ 'px';drag.style.top = top + 'px';};document.onmouseup = function(e) { //當鼠標彈起來的時候不再移動 this.onmousemove = null;this.onmouseup = null; //預防鼠標彈起來后還會循環（即預防鼠標放上去的時候還會移動） //修復低版本ie bug if(typeof drag.releaseCapture!='undefined'){drag.releaseCapture();}};};};</script>
總結
以上是生活随笔為你收集整理的js实现鼠标拖拽功能基本思路的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： requireJS和seajs区别？
- 下一篇： ajax封装回调函数代码