今日は、最後のドラッグのプロトタイプにいくつかの問題を解決します。問題を見てみましょう。
前の号から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 ||イベント; disx = oevent.clientx -odiv.offsetLeft; disy = oevent.clienty -odiv.offsettop; odiv.onmousemove = function（ev）{var oevent = ev ||イベント; 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.私のマウスが今より速く動くと、マウスがこのdivから出て、この時点でdivがマウスに従わないことがわかります。
では、なぜこの問題が発生するのですか？
その理由は実際には非常に単純です。 MousemoveイベントをDivに追加するため、マウスがDivから逸脱すると、Mousemoveは現時点ではトリガーされなくなります。
解決策：イベントはドキュメントにロードされます。マウスがまだページにあるため、何があってもMousemoveはトリガーされるため、速くなります。
次に、それに応じてコードを変更します。
<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 ||イベント; disx = oevent.clientx -odiv.offsetLeft; disy = oevent.clienty -odiv.offsettop; //イベントでロードdocument.onmousemove = function（ev）{var oevent = ev ||イベント; 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。まだそこに問題があるか見てみましょう。すぐにドラッグする問題は解決されましたが、マウスをこの位置に移動したとき
これで、マウスがdivにないことがはっきりとわかります。この時点でマウスを持ち上げると、戻ってきた後に動くことがわかります。これは別のバグです！
実際、この質問は上記の質問と同じです。だから解決するのは非常に簡単です、ドキュメントにマウスアップを追加しましょう、試してみましょう
document.onmouseup = function（）{document.onmousemove = null; document.onmouseup = null; };このようにして、今あなたがちょうどあなたがちょうどあなたがちょうど位置に移動するならば、以前のバグはありません、そして、速く移動することに問題はありません。すべてが正常です。
3。ブラウザの互換性の問題を見てみましょう
実際、Firefoxブラウザの下位バージョンにはそのような問題があります
。どうやってそうなった？初めてドラッグするとき、それは正しいです。一度ドラッグすると、押して保持して移動すると、その背後に影があることがわかります。これで何が起こっているのですか？
実際、私たちが今ドラッグしているFirefoxはバギーです。それで、divにコンテンツを追加した場合はどうなりますか
あなたは今問題がないことがわかります。
したがって、Firefoxのバグは空のdivにのみ表示されます。
解決：
実際、それは非常に簡単です。ブラウザのデフォルトイベントをブロックして、Falseを返すだけです。 OnMousedownで。なぜそれをOnMousedownに追加するのですか？
ドラッグが始まるイベントについて考えることができますか？ OnMousedownから始まります。マウスが押されると、ドラッグが開始されます。したがって、オンマーズダウンをロードする必要があります。
実際、それはちょうど文を返す文を追加しただけです。 Firefoxのバグをブロックしました。
これにより、どのように遅れていても、問題はありません。
添付コード：
<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 ||イベント; disx = oevent.clientx -odiv.offsetLeft; disy = oevent.clienty -odiv.offsettop; //イベントでロードdocument.onmousemove = function（ev）{var oevent = ev ||イベント; odiv.style.left = oevent.clientx -disx+'px'; odiv.style.top = oevent.clienty -disy+'px'; }; document.onmouseup = function（）{document.onmousemove = null; document.onmouseup = null; }; falseを返します。 }; }; </script>プログラムは現在完了しましたが、ユーザーエクスペリエンスにはまだいくつかの問題があります。
たとえば、ユーザーがこのdivをブラウザからドラッグすることができる場合、どのように解決できますか？
次に、判断を追加します。左から外出する場合、これは非常に簡単です
、それは0に直接等しく、彼は左から出ることができません。次に、上記で同じことが言えます。
それでは、どうすれば自分自身が正しい出かけを防ぐことができますか？ ？絵を描いて明確にしてください。実際、Divからページの視覚幅を差し引くことで計算できます。
次に、これがいわゆる最大値です。移動する距離がこの最大値を超える場合、それはこの最大値に等しくなります。次に、以下は同じです。
完全なコードを添付してください：
<script type = "text/javascript"> //空のdivをドラッグアンドドロップします。 Firefoxの低いバージョンにはbug window.onload = function（）{var odiv = document.getElementById（ "div1"）; var disx = 0; var disy = 0; odiv.onmousedown = function（ev）{var oevent = ev ||イベント; disx = oevent.clientx -odiv.offsetLeft; disy = oevent.clienty -odiv.offsettop; document.onmousemove = function（ev）{var oevent = ev ||イベント; // div var odivleft = oevent.clientx -disxの現在の場所を保存します。 var odivtop = oevent.clienty -disy; //左からドラッグアウトする場合（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; }; falseを返します。 //デフォルトのイベントをブロックし、Firefoxのバグを解決します}; }; </script>その後、ドラッグはより完全になりました。 o（∩_∩）o