Javascript 拖拽雛形中的一些問題(逐行分析代碼，讓你輕松了拖拽的原理)
今天我們就來解決上一次拖拽雛形中的一些問題。下面看看有哪些問題？
附上上期的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)在的這個(gè)拖拽如果我鼠標(biāo)移動(dòng)的快點(diǎn)，
你會(huì)發(fā)現(xiàn)這個(gè)鼠標(biāo)從這個(gè)div出來了，這個(gè)時(shí)候div不會(huì)跟著鼠標(biāo)走了。
那為什么會(huì)出現(xiàn)這個(gè)問題呢？
原因其實(shí)很簡單，mousemove的事件我們是給div加的,所以鼠標(biāo)一旦脫離了這個(gè)div,那么這個(gè)時(shí)候mousemove已經(jīng)不觸發(fā)了。
解決方案： 事件加載document 上,因?yàn)槟闶髽?biāo)無論如何都還在頁面里面,怎么樣都會(huì)觸發(fā)mousemove 這樣移動(dòng)的在快也沒問題。
那么我們相應(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>
那么這個(gè)問題就可以解決了。
2. 我們看看現(xiàn)在還有什么問題，雖然拖的快的問題解決了，但是當(dāng)我把鼠標(biāo)移動(dòng)到這個(gè)位置
現(xiàn)在可以明顯看到鼠標(biāo)不在div上,如果這個(gè)時(shí)候抬起鼠標(biāo)，你可以看到回來之后它還會(huì)動(dòng)。
這就又是一個(gè)bug！
其實(shí)這個(gè)問題和上面的是一樣的。所以呢解決起來也很簡單我們把mouseup也加到document上，我們來試一下看看
document.onmouseup = function() {
document.onmousemove = null;
document.onmouseup = null;
};
這樣 現(xiàn)在如果在移動(dòng)到剛才的那個(gè)位置，就不會(huì)在出現(xiàn)之前的bug了，并且移動(dòng)的快也沒有任何的問題。一切都很正常。
3. 我們看看瀏覽器兼容的問題
其實(shí)在低版本的火狐瀏覽器中有這樣一個(gè)問題
。怎么出現(xiàn)的呢，當(dāng)你第一次拖的時(shí)候是對的，在拖一次的時(shí)候按住在移動(dòng)，你會(huì)發(fā)現(xiàn)會(huì)有個(gè)這個(gè)影子在后面。這個(gè)是怎么回事呢？
實(shí)際上來說我們現(xiàn)在拖動(dòng)的是一個(gè)空的div火狐是有bug的，那么如果在div中加點(diǎn)內(nèi)容呢
你會(huì)發(fā)現(xiàn)現(xiàn)在又沒有問題了。
所以火狐的bug就只有在空div中出現(xiàn)的。
解決方案：
其實(shí)很簡單，我們就只要阻止瀏覽器默認(rèn)事件就可以了 return false; 在onmousedown中。 為什么要加在onmousedown中呢？
大家可以想一下，拖拽是從哪個(gè)事件開始的，是從onmousedown開始的吧，當(dāng)鼠標(biāo)按下的時(shí)候拖拽就開始了。所以要加載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)在程序是完整了，但是在用戶體驗(yàn)上還有一些問題。
比如說用戶可能會(huì)把這個(gè)div拖出瀏覽器外面，那怎么解決呢？
那我們就在加個(gè)判斷唄。 這個(gè)很簡單吧，如果從左邊出去了
，那就直接等于0，他就從左邊出不去了。那么上邊也是一樣的。
那么怎么防止不能從右邊出去？？ 畫個(gè)圖就清楚了。 其實(shí)我們只要把頁面的可視取的寬度減掉div的寬度就能算出來了。
那這個(gè)就是所謂的最大值，判斷一下如果移動(dòng)的距離超過了這個(gè)最大值就等于這個(gè)最大值即可。那么下邊是一樣的。
附上完整代碼：
<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;
// 存儲(chǔ)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)在這個(gè)拖拽就比較完整啦。O(∩_∩)O
相關(guān)文章
JavaScript Canvas繪制動(dòng)態(tài)線框效果
這篇文章主要為大家詳細(xì)介紹了JavaScript Canvas繪制動(dòng)態(tài)線框效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
JS將時(shí)間的標(biāo)準(zhǔn)格式和時(shí)間戳格式和2022-01-27?00:00:00(年月日時(shí)分秒)格式相互轉(zhuǎn)換(最新推薦)
這篇文章主要介紹了JS如何將時(shí)間的標(biāo)準(zhǔn)格式和時(shí)間戳格式和2022-01-27?00:00:00（年月日時(shí)分秒）格式相互轉(zhuǎn)換,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-05-05
線路分流自動(dòng)跳轉(zhuǎn)代碼；希望對大家有用！
線路分流自動(dòng)跳轉(zhuǎn)代碼；希望對大家有用！...2006-12-12
js中判斷文本框是否為空的兩種方法，需要的朋友可以參考下。2011-07-07
JS實(shí)現(xiàn)圖片輪播效果實(shí)例詳解【可自動(dòng)和手動(dòng)】
這篇文章主要介紹了JS實(shí)現(xiàn)圖片輪播效果,結(jié)合完整實(shí)例形式分析了javascript可自動(dòng)和手動(dòng)輪播圖的原理、布局與輪播功能相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-04-04
類似框架的js代碼...2006-11-11
這篇文章介紹了在ASP.NET中使用JavaScript腳本的方法，有需要的朋友可以參考一下2013-11-11
使用multiple可以實(shí)現(xiàn)select多選，本例將為大家介紹下select多選 multiple的使用，新手朋友們可以學(xué)習(xí)下2014-06-06
JS中的for in 可遍歷變量的所有屬性！利用此特性制作了一個(gè)JS當(dāng)前屬性查詢！2010-12-12
js實(shí)現(xiàn)網(wǎng)頁右上角滑出會(huì)自動(dòng)消失大幅廣告的方法
這篇文章主要介紹了js實(shí)現(xiàn)網(wǎng)頁右上角滑出會(huì)自動(dòng)消失大幅廣告的方法,是javascript廣告特效的典型應(yīng)用,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-02-02