まず、オブジェクト指向の演習の基本的なルールと問題を理解しましょう。
最初に通常の書き込み方法を書き、次にオブジェクト指向のライティング用語に変更します
通常の方法の変形
nestされた機能を持たないようにしてください
globalグローバル変数があります
consments個別の関数に割り当てられていないオンロード関数にステートメントを置く
オブジェクト指向に変更します
・グローバル変数は属性です
・関数はメソッドです
onloadオンロードでオブジェクトを作成します
このポインターの変更について
まず、ドラッグ効果のレイアウトを改善します。
HTML構造：
<div id = "box"> </div>
CSCスタイル：
#box {position：absolute; width：200px; height：200px; background：red;}
最初のステップは、プロセス指向のドラッグアンドドロップを確認することです
コードコピーは次のとおりです。
window.onload = function（）{
//要素と初期値を取得します
var obox = document.getElementById（ 'box'）、
disx = 0、disy = 0;
//コンテナマウスプレスイベント
obox.onmousedown = function（e）{
var e = e || window.event;
disx = e.clientx -this.offsetLeft;
disy = e.clienty -this.offsettop;
document.onmousemove = function（e）{
var e = e || window.event;
obox.style.left =（e.clientx -disx） + 'px';
obox.style.top =（e.clienty -disy） + 'px';
};
document.onmouseup = function（）{
document.onmousemove = null;
document.onmouseup = null;
};
falseを返します。
};
};
ステップ2：オブジェクト指向にプロセス指向を書き直します
コードコピーは次のとおりです。
window.onload = function（）{
var drag = new Drag（ 'Box'）;
drag.init（）;
};
//コンストラクタードラッグ
関数drag（id）{
this.obj = document.getElementById（id）;
this.disx = 0;
this.disy = 0;
}
drag.prototype.init = function（）{
//このポインター
var me = this;
this.obj.onmousedown = function（e）{
var e = e ||イベント;
me.Mousedown（e）;
//デフォルトイベントをブロックします
falseを返します。
};
};
drag.prototype.mousedown = function（e）{
//このポインター
var me = this;
this.disx = e.clientx -this.obj.offsetLeft;
this.disy = e.clienty -this.obj.offsettop;
document.onmousemove = function（e）{
var e = e || window.event;
me.mousemove（e）;
};
document.onmouseup = function（）{
me.mouseup（）;
}
};
drag.prototype.mousemove = function（e）{
this.obj.style.left =（e.clientx -this.disx） + 'px';
this.obj.style.top =（e.clienty -this.disy） + 'px';
};
drag.prototype.mouseup = function（）{
document.onmousemove = null;
document.onmouseup = null;
};
ステップ3：コードの違いを確認してください
ホームページはコンストラクターを使用してオブジェクトを作成します。
コードコピーは次のとおりです。
//コンストラクタードラッグ
関数drag（id）{
this.obj = document.getElementById（id）;
this.disx = 0;
this.disy = 0;
}
以前の書面によるルールを順守し、グローバル変数を属性に変えてください！
次に、プロトタイプにすべての機能を書きます。
コードコピーは次のとおりです。
drag.prototype.init = function（）{
};
drag.prototype.mousedown = function（）{
};
drag.prototype.mousemove = function（）{
};
drag.prototype.mouseup = function（）{
};
最初にinit関数を見てみましょう：
コードコピーは次のとおりです。
drag.prototype.init = function（）{
//このポインター
var me = this;
this.obj.onmousedown = function（e）{
var e = e ||イベント;
me.Mousedown（e）;
//デフォルトイベントをブロックします
falseを返します。
};
};
ME変数を使用してこのポインターを保存するため、次のコードがこのポインターが指し示すエラーが表示されないようにします。
次はムーズダウン機能です：
コードコピーは次のとおりです。
drag.prototype.mousedown = function（e）{
//このポインター
var me = this;
this.disx = e.clientx -this.obj.offsetLeft;
this.disy = e.clienty -this.obj.offsettop;
document.onmousemove = function（e）{
var e = e || window.event;
me.mousemove（e）;
};
document.onmouseup = function（）{
me.mouseup（）;
}
};
オブジェクト指向に書き換えるときは、イベントオブジェクトに注意を払う必要があります。イベントオブジェクトはイベントにのみ表示されるため、イベントオブジェクト変数を保存して、パラメーターを通過する必要があります。
Mousemove機能とその背後にあるマウスアップ機能に注意を払うものは何もありません！
注意すべき問題
このポインターの問題に関して、これはオブジェクト指向で特に重要です！
このエクステンションの読み取り：
http://div.io/topic/809
イベントオブジェクトの問題に関しては、イベントオブジェクトはイベントにのみ表示されるため、書くときはメソッドに注意を払う必要があります。