今天我們就來解決上一次拖拽雛形中的一些問題。下面看看有哪些問題？
附上上期的Javascript代碼，方便大家查看問題。
<script type="text/javascript"> window.onload = function() { var oDiv = document.getElementById("div1"); var disX = 0; var disY = 0; oDiv.onmousedown = function(ev) { var oEvent = ev || event; disX = oEvent.clientX - oDiv.offsetLeft; disY = oEvent.clientY - oDiv.offsetTop; oDiv.onmousemove = function(ev) { var oEvent = ev || event; oDiv.style.left = oEvent.clientX - disX+'px'; oDiv.style.top = oEvent.clientY - disY+'px'; }; oDiv.onmouseup = function() { oDiv.onmousemove = null; oDiv.onmouseup = null; }; }; }; </script>1. 現(xiàn)在的這個拖拽如果我鼠標(biāo)移動的快點(diǎn)，
你會發(fā)現(xiàn)這個鼠標(biāo)從這個div出來了，這個時候div不會跟著鼠標(biāo)走了。
那為什么會出現(xiàn)這個問題呢？
原因其實(shí)很簡單，mousemove的事件我們是給div加的,所以鼠標(biāo)一旦脫離了這個div,那么這個時候mousemove已經(jīng)不觸發(fā)了。
解決方案： 事件加載document 上,因為你鼠標(biāo)無論如何都還在頁面里面,怎么樣都會觸發(fā)mousemove 這樣移動的在快也沒問題。
那么我們相應(yīng)的修改下代碼。
<script type="text/javascript"> window.onload = function() { var oDiv = document.getElementById("div1"); var disX = 0; var disY = 0; oDiv.onmousedown = function(ev) { var oEvent = ev || event; disX = oEvent.clientX - oDiv.offsetLeft; disY = oEvent.clientY - oDiv.offsetTop; // 事件加載document 上 document.onmousemove = function(ev) { var oEvent = ev || event; oDiv.style.left = oEvent.clientX - disX+'px'; oDiv.style.top = oEvent.clientY - disY+'px'; }; oDiv.onmouseup = function() { document.onmousemove = null; oDiv.onmouseup = null; }; }; }; </script>那么這個問題就可以解決了。
2. 我們看看現(xiàn)在還有什么問題，雖然拖的快的問題解決了，但是當(dāng)我把鼠標(biāo)移動到這個位置
現(xiàn)在可以明顯看到鼠標(biāo)不在div上,如果這個時候抬起鼠標(biāo)，你可以看到回來之后它還會動。
這就又是一個bug！
其實(shí)這個問題和上面的是一樣的。所以呢解決起來也很簡單我們把mouseup也加到document上，我們來試一下看看
document.onmouseup = function() { document.onmousemove = null; document.onmouseup = null; };這樣 現(xiàn)在如果在移動到剛才的那個位置，就不會在出現(xiàn)之前的bug了，并且移動的快也沒有任何的問題。一切都很正常。
3. 我們看看瀏覽器兼容的問題
其實(shí)在低版本的火狐瀏覽器中有這樣一個問題
。怎么出現(xiàn)的呢，當(dāng)你第一次拖的時候是對的，在拖一次的時候按住在移動，你會發(fā)現(xiàn)會有個這個影子在后面。這個是怎么回事呢？
實(shí)際上來說我們現(xiàn)在拖動的是一個空的div火狐是有bug的，那么如果在div中加點(diǎn)內(nèi)容呢
你會發(fā)現(xiàn)現(xiàn)在又沒有問題了。
所以火狐的bug就只有在空div中出現(xiàn)的。
解決方案：
其實(shí)很簡單，我們就只要阻止瀏覽器默認(rèn)事件就可以了 return false; 在onmousedown中。 為什么要加在onmousedown中呢？
大家可以想一下，拖拽是從哪個事件開始的，是從onmousedown開始的吧，當(dāng)鼠標(biāo)按下的時候拖拽就開始了。所以要加載onmousedown中。
實(shí)際上就是加了一句return false; 把火狐的bug屏蔽掉了。
這樣不管怎么拖就沒有問題了。
附上代碼：
<script type="text/javascript"> window.onload = function() { var oDiv = document.getElementById("div1"); var disX = 0; var disY = 0; oDiv.onmousedown = function(ev) { var oEvent = ev || event; disX = oEvent.clientX - oDiv.offsetLeft; disY = oEvent.clientY - oDiv.offsetTop; // 事件加載document 上 document.onmousemove = function(ev) { var oEvent = ev || event; oDiv.style.left = oEvent.clientX - disX+'px'; oDiv.style.top = oEvent.clientY - disY+'px'; }; document.onmouseup = function() { document.onmousemove = null; document.onmouseup = null; }; return false; }; }; </script>現(xiàn)在程序是完整了，但是在用戶體驗上還有一些問題。
比如說用戶可能會把這個div拖出瀏覽器外面，那怎么解決呢？
那我們就在加個判斷唄。 這個很簡單吧，如果從左邊出去了
，那就直接等于0，他就從左邊出不去了。那么上邊也是一樣的。
那么怎么防止不能從右邊出去？？ 畫個圖就清楚了。 其實(shí)我們只要把頁面的可視取的寬度減掉div的寬度就能算出來了。
那這個就是所謂的最大值，判斷一下如果移動的距離超過了這個最大值就等于這個最大值即可。那么下邊是一樣的。
附上完整代碼：
<script type="text/javascript"> // 拖拽空div 低版本的火狐有bug window.onload = function() { var oDiv = document.getElementById("div1");var disX = 0; var disY = 0; oDiv.onmousedown = function(ev) { var oEvent = ev || event; disX = oEvent.clientX - oDiv.offsetLeft; disY = oEvent.clientY - oDiv.offsetTop; document.onmousemove = function(ev) { var oEvent = ev || event; // 存儲div當(dāng)前的位置 var oDivLeft = oEvent.clientX - disX; var oDivTop = oEvent.clientY - disY; // 從左邊拖出去了 if (oDivLeft < 0) { oDivLeft = 0; } else if (oDivLeft > document.documentElement.clientWidth - oDiv.offsetWidth) { oDivLeft = document.documentElement.clientWidth - oDiv.offsetWidth; } if (oDivTop < 0) { oDivTop = 0; } else if (oDivTop > document.documentElement.clientHeight - oDiv.offsetHeight) { oDivTop = document.documentElement.clientHeight - oDiv.offsetHeight; } oDiv.style.left = oDivLeft + 'px'; oDiv.style.top = oDivTop + 'px'; }; document.onmouseup = function() { document.onmousemove = null; document.onmouseup = null; }; return false; // 阻止默認(rèn)事件,解決火狐的bug }; }; </script>那么現(xiàn)在這個拖拽就比較完整啦。O(∩_∩)O
新聞熱點(diǎn)
疑難解答
