ドラッグの原則：実際、マウスと左上隅の間の距離は変わらないままです。下の写真を見てみましょう。この赤い点はマウスです。
ドラッグドラッグとは、実際には、マウスの位置を介してオブジェクトの位置を計算することを意味します。それはとてもシンプルで非常に故意です。では、この距離をどのように見つけますか？ ？
マウスの位置とオブジェクトの位置の違いは、その距離ですよね？次に、この対角線は、水平線と垂直線で構成されます。
プログラムがどのように行われているか見てみましょう。
<div id = "div1"> </div>
実際、彼が変わったのはdivの左上でしたが、それから彼は動き始めました。その場合、絶対的なポジショニングが必要ですよね？
<style type = "text/css"> ＃div1 {width：200px;高さ：200px;背景：赤;位置：絶対; } </style>ここにいくつかのステップがあります。1。マウスを押します2。マウスを持ち上げます3。マウスを動かします
<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; //水平位置はマウスの位置です - div disy = oevent.clienty -odiv.offsettopの位置。 }; odiv.onmousemove = function（ev）{var oevent = ev ||イベント; odiv.style.left = oevent.clientx -disx+'px'; //現在のマウスの位置-disx odiv.style.top = oevent.clienty- disy+'px'; }; }; </script>写真に話しかける：
var odivleft = oevent.clientx -disx;図は非常に明確です
Mouseupは、現在の効果が何であるかを見ないでください。 。
あなたは非常に興味深い現象を見つけるでしょう。マウスを押さなければ、私は従います。なぜこれがなぜですか？ ？ ？
Mousemoveを見てみましょう。JavaScriptの誰も、開始する前にマウスを押す必要があると規定していませんよね？マウスを押すかどうかにかかわらず、このMousemoveは常に起こっているので、問題はここから発生します。マウスが押される前に、マウスが動いても反応がないはずです。反応するためにそれを押す必要があります。
したがって、このMousemoveは起動したらすぐに追加する必要はありませんが、マウスが押されるまで待機し、Mousemoveを追加して変更されたコードを表示する必要があります。
ちなみに、マウスアップが追加され、彼の役割は現時点で反映されています。関数はodiv.onmousemove = nullです。移動イベントを削除し、
それ以外の場合は、マウスが飼育されている場合、オブジェクトはまだあなたに従います。 odiv.onmouseup = null;ゴミが残っていない場合、マウスを持ち上げるのは役に立たないでしょう。
変更されたコードを見てみましょう。
<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; //水平位置はマウスの位置です - div disy = oevent.clienty -odiv.offsettopの位置。 odiv.onmousemove = function（ev）{var oevent = ev ||イベント; odiv.style.left = oevent.clientx -disx+'px'; //現在のマウスの位置-disx odiv.style.top = oevent.clienty- disy+'px'; }; odiv.onmouseup = function（）{odiv.onmousemove = null; odiv.onmouseup = null; //ゴミが残っていないため、マウスを持ち上げるのは役に立たない}; }; }; </script>今、私たちは単純なドラッグアンドドロップを行いましたが、もちろん、解決すべき小さな問題がまだいくつかあります。
しかし、何があっても、私たちはすでにドラッグプロトタイプを持っています。次の号では、いくつかのバグを1つずつ解決します。