js を使用してドラッグ アンド ドロップ効果を達成する_javascript スキル

まず、オブジェクト指向の演習の基本的なルールと問題を理解しましょう:

まず通常の書き方を書いてから、オブジェクト指向の書き方に変更します
通常のメソッド変換

・関数を入れ子にしないようにしてください
·グローバル変数を持つことができます
·onload関数内の非代入文を別の関数に入れる

オブジェクト指向に変更

・グローバル変数は属性です
·関数はメソッドです
·onloadでオブジェクトを作成
·このポインタの問題を変更します

まず、ドラッグ エフェクトのレイアウトを改善します:
HTML 構造:

CSC スタイル:
#box{位置: 絶対;幅: 200px;高さ: 200px;背景: 赤;}

最初のステップは、プロセス指向のドラッグ アンド ドロップを確認することです

コードをコピーします コードは次のとおりです:

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;
};
return false;
};
};

2 番目のステップは、プロセス指向をオブジェクト指向に書き直すことです

コードをコピーします コードは次のとおりです:

window.onload = function (){
varrag = new Drag('box');
Drag.init();
};
//コンストラクタードラッグ
関数ドラッグ(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);
//デフォルトイベントをブロック
return 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 番目のステップは、コードの違いを確認することです

ホームページはコンストラクターを使用してオブジェクトを作成します:

コードをコピー コードは次のとおりです:

//コンストラクタードラッグ
関数ドラッグ(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);
//デフォルトイベントをブロック
return false;
};
};

this が指すエラーが後続のコードで発生しないように、me 変数を使用して this ポインターを保存します。

次に、mouseDown 関数が来ます:

コードをコピーします コードは次のとおりです:

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関数、mouseUp関数では特に注意する点はありません！

注意事項

このポインタの問題ですが、これはオブジェクト指向では特に重要です。
この詳細な読み方:
http://div.io/topic/809

イベントオブジェクトの問題ですが、イベントオブジェクトはイベント内でしか出現しないので、メソッドを書くときは注意してください！