本文實例分析了JS實現拖拽的方法。分享給大家供大家參考，具體如下：
分析：
1.鼠標按下，拖拽開始，鼠標移動，拖拽進行，鼠標抬起，拖拽結束（三個事件）
2.被拖動元素與鼠標之間的位置在拖動過程中始終不變，利用這個原理，被拖動元素的位置就是鼠標的左（上）邊距-鼠標與被拖動元素之間的距離
注意：onmousemove應該是在onmousedown發生時進行，不然不需要點擊也能拖動了。
用戶可能會將拖動層脫出窗口外。
核心代碼：
window.onload=function(){ var box=document.getElementById("div"); var disX; var disY; box.onmousedown=function(ev){ //如果三個事件都用在box上，拖得快一點，鼠標脫離移動層，移動層就拖不動了 var oEvent=ev||event; disX=oEvent.clientX-box.offsetLeft; disY=oEvent.clientY-box.offsetTop; document.onmousemove=function(ev){ var oEvent=ev||event; var l=oEvent.clientX-disX; var t=oEvent.clientY-disY; if(l<0){ l=0; }else if(l>document.documentElement.clientWidth-box.offsetWidth){ l=document.documentElement.clientWidth-box.offsetWidth; } if(t<0){ t=0; }else if(t>document.documentElement.clientHeight-box.offsetHeight){ t=document.documentElement.clientHeight-box.offsetHeight; } box.style.left=l+'px'; box.style.top=t+'px'; }; document.onmouseup=function(){ document.onmousemove=null; document.onmouseup=null; //鼠標抬起來后，onmouseup事件本身也沒意義了，所以最好清理掉 }; return false; //阻止默認行為，空的div在低版本ff下，第二次拖動手型會變異常 };}更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《JavaScript切換特效與技巧總結》、《JavaScript動畫特效與技巧匯總》、《JavaScript查找算法技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》、《JavaScript中json操作技巧總結》、《JavaScript錯誤與調試技巧總結》及《JavaScript數學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。
新聞熱點
疑難解答
