JS ドラッグ コード_JavaScript スキルを書いてみましょう

1. ドラッグされるイベントは onmousedown、onmousemove、onmouseup の 3 つです
2. onmousemove イベントでは、ドラッグされた要素の位置の変更が処理されます。実際には、単刀直入に言うと、要素が必要な距離です。 move は、マウスの 2 つの動きの間の距離です。
3. setCapture と releaseCapture も含まれます。これは、移動された要素が常にフォーカスされるようにすることです。
これまでの理解は、JS ドラッグ テクノロジ -- setCapture の実装について を参照してください。その後、作業要件の改善に伴い、すべての作業はクロスブラウザーで行う必要があります。そこで、いくつかのオープンソースコードを参照して再考し、実装しました。
一般的なアイデアは次のステップに分析できます。1 つずつ説明します。
1. 引きずるために動いているのでしょうか？もちろん、Google マップとは異なり、その目的は、移動するたびに現在の空間座標を計算して地理情報をロードすることです。そこで、ここでいくつかの一般的なイベントを設計しました。以下はイベント リスト
onDragStart です。要素がドラッグされるとき、このイベントを登録すると、トリガーされたときに 2 つのパラメーター x と y を受け取ります。これらは、ドラッグされたときに移動された要素の座標です。
onDrag: 要素のドラッグ プロセス中に、このイベントを登録すると、トリガーされたときに 2 つのパラメーター nx と ny を受け取ります。
onDragEnd: これを登録すると、要素が終了したとき。イベントがトリガーされると、2 つのパラメーターを受け取ります。パラメーター x と y はそれぞれ、移動された要素の現在の座標です。
2. 以前は、onmousedown イベントを誰にバインドする必要がありましたか?後で、これが非常に柔軟性に欠けていることがわかりました。無関係な要素を指定すると、それらの要素を同時にドラッグできるようになりました。
3. 移動プロセス中に要素に常にフォーカスがあるようにするにはどうすればよいですか?クロスブラウザなので、setCapture などのメソッドは使用しません。これは、要素の移動プロセス中にフォーカスがない理由です。主な理由は、ドラッグされた要素に onmousemove イベントを登録しているためです。これは必要ないので、要素が onmousedown イベントをトリガーするときに、onmousemove および onmouseup イベントをドキュメントに直接登録して、マウスがどこに移動してもフォーカスが存在するようにします。
ここまで述べたら、コード構造を直接見てみましょう。

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

Drag = {
obj: null ,
init: function (options) {
options.handler.onmousedown = this.start;
options.handler.root = options.root ||
var root = options. handler.root ;
root.onDragStart = options.dragStart || new Function();
root.onDragEnd = options.onDragEnd || new Function( );
},
start: function (e) {//これはこの時点のハンドラーです
var obj = Drag.obj = this;
obj.style.cursor = '移動';
e = e || Drag.fixEvent(window.event);
ey = e.pageY; obj.lastMouseY = ey;
var x = obj.root..offsetTop;
obj.root.style.left = x "px"; obj.root .style.top = y "px";
document.onmouseup = Drag.end;
obj.root.onDragStart(x, y); 🎜>} ,
ドラッグ: function (e) {
e = e || Drag.fixEvent(window.event);
ex = e.pageX; 🎜>var root = Drag.obj.root;
var x = root.style.left ? parseInt(root.style.left) : 0;
var y = root.style.top ? style.top ) : 0;
var nx = ex - Drag.obj.lastMouseX x;
var ny = ey - Drag.obj.style.left = nx "px" ;
root.style.top = ny "px";
Drag.obj.root.onDrag(nx, ny);
Drag.obj.lastMouseY = ey;
},
end: function (e) {
var x = Drag.obj.root.style.left ? parseInt(Drag.obj.root.style.left) : 0; 🎜>var y = Drag.obj.root.style.top ? parseInt(Drag.obj.root.style.top) : 0;
Drag.obj.root.onDragEnd(x, y); .onmousemove = null;
document.onmouseup = null;
},
fixEvent: function (e) {
e.pageX = e.clientX ドキュメント。 documentElement.scrollLeft ;
e.pageY = e.clientY document.documentElement.scrollTop;
}
}


上記の init は主に、onDragStart、onDrag、onDragEnd の 3 つのイベントの記録などの初期化作業を処理します。ハンドラーはドラッグ イベントを処理する要素であり、ルートはドラッグされた要素です。
ハンドラーがクリックされると、Drag.start メソッドがトリガーされ、主にページ全体に対するマウスの位置が記録され、ドキュメントの onmouseup および onmousemove イベントが登録され、onDragStart イベントがトリガーされます。
Drag.drag メソッドも非常に単純です。その主な機能は、移動された要素の位置を更新し、ページ全体に対するマウスの位置を記録することです。
Drag.end メソッドはさらに簡単で、仕上げ作業を行うだけです。

最後に、皆さんが楽しく学習できるようコードを添付します。

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

Drag.init({
handler : document.getElementById("handler"),
root:document.getElementById("root");