模擬拖拽的原理：
x1等于div.offsetLeft
y1等于div.offsetTop
x2等于ev.clientX(ev表示event事件)
y2等于ev.clientY
當(dāng)我們在方塊上按下鼠標(biāo)的時候，x2-x1即可確定。移動鼠標(biāo)之后，我們用鼠標(biāo)當(dāng)前的位置即x4、y4減去x2-x1、y2-y1就可以得到方塊現(xiàn)在的位置。
代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #box{ width: 100px; height: 100px; background: red; position: absolute; } </style> </head> <body> <div id="box"></div> <script type="text/javascript"> var oBox = document.getElementById('box'); oBox.onmousedown = function(ev){ // 鼠標(biāo)按下 var ev = ev || event; // 獲取鼠標(biāo)離div得距離 var mouseBoxleft = ev.clientX - this.offsetLeft; var mouseBoxTop = ev.clientY - this.offsetTop; oBox.onmousemove = function(ev){ // 鼠標(biāo)按下左鍵并移動 var ev = ev || event; // 設(shè)置div移動時，它的位置 oBox.style.left = ev.clientX - mouseBoxleft + 'px'; oBox.style.top = ev.clientY - mouseBoxleft + 'px'; } oBox.onmouseup = function(){ // 鼠標(biāo)左鍵抬起 oBox.onmousemove = oBox.onmouseup = null; } } </script> </body> </html>優(yōu)化代碼：
【1】鼠標(biāo)移動快的時候，鼠標(biāo)會移出方塊，這時方塊就不會再跟隨鼠標(biāo)動了。
解決辦法：就是將onmousemove和onmouseup加到document對象上
代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #box{ width: 100px; height: 100px; background: red; position: absolute; } </style> </head> <body> <div id="box"></div> <script> var oBox = document.getElementById('box'); oBox.onmousedown = function(ev){ // 鼠標(biāo)按下 var ev = ev || event; // 獲取鼠標(biāo)離div得距離 var mouseBoxleft = ev.clientX - this.offsetLeft; var mouseBoxTop = ev.clientY - this.offsetTop; document.onmousemove = function(ev){ // 鼠標(biāo)按下左鍵并移動 var ev = ev || event; // 設(shè)置div移動時，它的位置 oBox.style.left = ev.clientX - mouseBoxleft + 'px'; oBox.style.top = ev.clientY - mouseBoxleft + 'px'; } document.onmouseup = function(){ // 鼠標(biāo)左鍵抬起 document.onmousemove = document.onmouseup = null; } } </script> </body> </html>【2】當(dāng)要拖動的方塊中有文字時會觸發(fā)瀏覽器的默認(rèn)行為
解決辦法：1、使用return false添加到onmousedown事件中阻止瀏覽器的默認(rèn)行為（IE除外）
2、使用全局捕獲（IE）
1、使用return false添加到onmousedown事件中阻止瀏覽器的默認(rèn)行為（IE除外）
代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #box{ width: 100px; height: 100px; background: red; position: absolute; top: 0; left: 0; } </style> </head> <body> <div id="box">模擬拖拽</div> <script> var oBox = document.getElementById('box'); oBox.onmousedown = function(ev){ // 鼠標(biāo)按下 var ev = ev || event; // 獲取鼠標(biāo)離div得距離 var mouseBoxleft = ev.clientX - this.offsetLeft; var mouseBoxTop = ev.clientY - this.offsetTop; document.onmousemove = function(ev){ // 鼠標(biāo)按下左鍵并移動 var ev = ev || event; // 設(shè)置div移動時，它的位置 oBox.style.left = ev.clientX - mouseBoxleft + 'px'; oBox.style.top = ev.clientY - mouseBoxleft + 'px'; } document.onmouseup = function(){ // 鼠標(biāo)左鍵抬起 document.onmousemove = document.onmouseup = null; } // 阻止默認(rèn)行為 return false; } </script> </body> </html>2、使用全局捕獲（IE）
全局捕獲：當(dāng)我們給一個元素這只全局捕獲后，改元素會監(jiān)聽后續(xù)發(fā)生的所有事件，當(dāng)有事件發(fā)生的時候就會觸發(fā)改元素的事件
代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <input type="button" id="button1" value="彈出1" /> <input type="button" id="button2" value="彈出2" /> <script type="text/javascript"> window.onload = function(){ var Btn1 = document.getElementById('button1'); var Btn2 = document.getElementById('button2'); Btn1.setCapture(); Btn1.onclick = function(){ alert(1); } Btn2.onclick = function(){ alert(2); } } </script> </body></html>給Btn1設(shè)置了全局捕獲之后，即使我們點擊了Btn2還是會觸發(fā)Btn1的點擊事件
在模擬拖拽中，給要拖拽的方塊onmousedown添加全局捕獲然后再onmouseup中取消全局捕獲
代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #box{ width: 100px; height: 100px; background: red; position: absolute; } </style></head> <body> <div id="box">模擬拖拽</div> <script> var oBox = document.getElementById('box'); oBox.onmousedown = function(ev){ // 鼠標(biāo)按下 var ev = ev || event; // 獲取鼠標(biāo)離div得距離 var mouseBoxleft = ev.clientX - this.offsetLeft; var mouseBoxTop = ev.clientY - this.offsetTop; // IE瀏覽器，全局捕獲 if(oBox.setCapture){ oBox.setCapture(); } document.onmousemove = function(ev){ // 鼠標(biāo)按下左鍵并移動 var ev = ev || event; // 設(shè)置div移動時，它的位置 oBox.style.left = ev.clientX - mouseBoxleft + 'px'; oBox.style.top = ev.clientY - mouseBoxleft + 'px'; } document.onmouseup = function(){ // 鼠標(biāo)左鍵抬起 document.onmousemove = document.onmouseup = null; //IE下，釋放全局捕獲 releaseCapture(); if ( oBox.releaseCapture ) { oBox.releaseCapture(); } } // 阻止默認(rèn)行為 return false; } </script> </body> </html>【3】封裝模擬拖拽函數(shù)
代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #box{ width: 100px; height: 100px; background: red; position: absolute; } </style> </head> <body> <div id="box">模擬拖拽</div> <script> var oBox = document.getElementById('box'); drag(oBox); function drag(obj){ obj.onmousedown = function(ev){ // 鼠標(biāo)按下 var ev = ev || event; // 獲取鼠標(biāo)離div得距離 var mouseBoxleft = ev.clientX - this.offsetLeft; var mouseBoxTop = ev.clientY - this.offsetTop; // IE瀏覽器，全局捕獲 if(obj.setCapture){ obj.setCapture(); } document.onmousemove = function(ev){ // 鼠標(biāo)按下左鍵并移動 var ev = ev || event; // 設(shè)置div移動時，它的位置 obj.style.left = ev.clientX - mouseBoxleft + 'px'; obj.style.top = ev.clientY - mouseBoxleft + 'px'; } document.onmouseup = function(){ // 鼠標(biāo)左鍵抬起 document.onmousemove = document.onmouseup = null; //IE下，釋放全局捕獲 releaseCapture(); if ( obj.releaseCapture ) { obj.releaseCapture(); } } // 阻止默認(rèn)行為 return false; } } </script> </body></html>以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時也希望多多支持武林網(wǎng)！
新聞熱點
疑難解答
