時代の変化に伴い、js は Web ページ (Ext フレームワークなど) を作成できるだけでなく、PC と互換性のある Web 特殊効果を作成することもできます。結局のところ、それらはブラウザに基づいており、プラットフォームとは何の関係もありません。 Microsoft の Windows 8 システム アプリが js を使用して開発できるようになりました。時間があれば試してみてください。
さて、本題に入り、ドラッグ可能な Div の JS 実装について話しましょう。まず、この関数を実装するアイデアについて話しましょう。
1. マウス div のマウスダウン イベントをキャプチャします。
2. ドキュメントのmousemoveイベントをキャプチャします。
3. イベントをキャンセルする
次に、コードを見てみましょう。
次のようにコードをコピーします。
関数ドラッグ(id) {
var $ = 関数 (フラグ) {
document.getElementById(フラグ)を返します;
}
$(id).onmousedown = 関数 (e) {
var d = ドキュメント;
var ページ = {
イベント: 関数 (evt) {
var ev = evt || ウィンドウイベント;
evを返します。
}、
pageX: 関数 (evt) {
var e = this.event(evt);
return e.pageX || (e.clientX + document.body.scrollLeft - document.body.clientLeft);
}、
pageY: 関数 (evt) {
var e = this.event(evt);
return e.pageY || (e.clientY + document.body.scrollTop - document.body.clientTop);
}、
LayerX: 関数 (evt) {
var e = this.event(evt);
e.layerX || e.offsetX を返します。
}、
LayerY: 関数 (evt) {
var e = this.event(evt);
e.layerY || e.offsetY を返します。
}
}
var x = ページ.layerX(e);
var y = ページ.layerY(e);
if (dv.setCapture) {
dv.setCapture();
}
else if (window.captureEvents) {
window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
}
d.onmousemove = 関数 (e) {
var tx = ページ.pageX(e) - x;
var ty = page.pageY(e) - y;
dv.style.left = tx + "px";
dv.style.top = ty + "px";
}
d.onmouseup = function () {
if (dv.releaseCapture) {
dv.releaseCapture();
}
else if (window.releaseEvents) {
window.releaseEvents(Event.MOUSEMOVE | Event.MOUSEUP);
}
d.onmousemove = null;
d.onmouseup = null;
}
}
}
コード分析:
1.
divオブジェクトを取得する
次のようにコードをコピーします。
var $ = 関数 (フラグ) {
document.getElementById(フラグ)を返します;
}
2. ドキュメントのマウスダウン イベントをキャプチャします。
その中には次のコードがあります。
次のようにコードをコピーします。
var ページ = {
イベント: 関数 (evt) {
var ev = evt || ウィンドウイベント;
evを返します。
}、
pageX: 関数 (evt) {
var e = this.event(evt);
return e.pageX || (e.clientX + document.body.scrollLeft - document.body.clientLeft);
}、
pageY: 関数 (evt) {
var e = this.event(evt);
return e.pageY || (e.clientY + document.body.scrollTop - document.body.clientTop);
}、
LayerX: 関数 (evt) {
var e = this.event(evt);
e.layerX || e.offsetX を返します。
}、
LayerY: 関数 (evt) {
var e = this.event(evt);
e.layerY || e.offsetY を返します。
}
}
このうち、eventはマウスイベントを取得し、pageXとpageYはマウスの座標を取得し、layerXとlayerYはマウスとdiv境界線の間の距離を取得します。
次のようなコードもあります。
次のようにコードをコピーします。
if (dv.setCapture) {
dv.setCapture();
}
else if (window.captureEvents) {
window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
}
これは、div の MouseMove イベントと MouseUp イベントをキャプチャするためです。tx がわからない場合は、オンラインで確認できます。
3. ドキュメントのMouseMoveイベントとmouseUpイベント:
次のようにコードをコピーします。
d.onmousemove = 関数 (e) {
var tx = ページ.pageX(e) - x;
var ty = page.pageY(e) - y;
dv.style.left = tx + "px";
dv.style.top = ty + "px";
}
d.onmouseup = function () {
if (dv.releaseCapture) {
dv.releaseCapture();
}
else if (window.releaseEvents) {
window.releaseEvents(Event.MOUSEMOVE | Event.MOUSEUP);
}
d.onmousemove = null;
d.onmouseup = null;
}
このうち、tx と ty は div 座標を設定するために使用される最も重要なコードです。
なぜ -x、-y なのかと疑問に思う人もいるかもしれません。
x、y は、減算されていない場合、実際にはマウスと div 境界の間の距離を取得します。
マウス矢印の座標は、div の x 座標と y 座標と同じになります。ドラッグすると、マウスの位置が左上隅に移動します。
次のようにコードをコピーします。
if (dv.releaseCapture) {
dv.releaseCapture();
}
else if (window.releaseEvents) {
window.releaseEvents(Event.MOUSEMOVE | Event.MOUSEUP);
}
d.onmousemove = null;
d.onmouseup = null;
上記のコードは、マウスが放された後にドキュメントの onmousemove イベントと onmouseup イベントをキャンセルします。
私は最近 js を勉強していますが、今後はその新しい経験を皆さんと共有し、皆さんと一緒に学び、進歩していきたいと思っています。