ドラッグ可能な DIV_javascript スキルを実装するための js メソッド

時代の変化に伴い、js は Web ページ (Ext フレームワークなど) を作成できるだけでなく、PC と互換性のある Web 特殊効果も作成できます。 , しかし、結局のところ、それはブラウザベースであり、プラットフォームとは何の関係もありません。 Microsoft の Windows 8 システム アプリが js を使用して開発できるようになりました。時間があれば試してみてください。

さて、本題に入り、ドラッグ可能な Div の JS 実装について話しましょう。この関数を実装するには、まずアイデアについて話しましょう。

1. マウス div のマウスダウン イベントをキャプチャします

2. ドキュメントのmousemoveイベントをキャプチャします

3. イベントをキャンセル

それではコードを見てみましょう:

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

function Drag(id) {
            var $ = function (flag) {
                return document.getElementById(flag);
            }
            $(id).onmousedown = function (e) {
                var d = document;
                var page = {
                    event: function (evt) {
                        var ev = evt || window.event;
                        return ev;
                    },
                    pageX: function (evt) {
                        var e = this.event(evt);
                        return e.pageX || (e.clientX + document.body.scrollLeft - document.body.clientLeft);
                    },
                    pageY: function (evt) {
                        var e = this.event(evt);
                        return e.pageY || (e.clientY + document.body.scrollTop - document.body.clientTop);

},
LayerX: function (evt) {
var e = this.event(evt);
e.layerX を返す || e.offsetX;
},
LayerY: function (evt) {
var e = this.event(evt);
e.layerY を返す || e.offsetY;
}
}
var x = page.layerX(e);
var y = ページ.layerY(e);       
if (dv.setCapture) {
dv.setCapture();
}
else if (window.captureEvents) 🎜> window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
}
d.onmousemove = function (e) {
var tx = page.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 $ = 関数 (フラグ) {

その中には次のようなコードがあります:

コードをコピーします

コードは次のとおりです: var page = { イベント: function (evt) { var ev = evt || window.event;

return ev;

= this.event(evt );
pageY: 関数 (evt) {
var e = this.event(evt);
Return e.layerX || e.offsetX;
) >


そのうち、event はマウスイベント、pageX、pageY を取得しますマウスの座標、layerX、layerY を取得マウスと div 境界の間の距離。

コードの一部もあります:

コードをコピーします


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

if (dv.setCapture) {
dv.setCapture();
}
else if (window.captureEvent s) {
window.captureEvents(Event.MOUSEMOVE | イベント. MOUSEUP);
}

これは、div の MouseMove および MouseUp イベントをキャプチャするためのものです。tx が分からない場合は、オンラインで確認できます。
3. ドキュメントの MouseMove および MouseUp イベント:

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

d.onmousemove = function (e) { " px";
dv.style.top = ty "px";
}
d.onmouseup = function () {
If ( dv.releasecapture）{
dv.releasecapture（）; onmouseup = null;
}


なぜ -x、-y なのでしょうか?

x、y は、減算されない場合、実際にはマウスと div 境界線の間の距離を取得します

マウスの矢印の座標は、div の x、y 座標と同じです。ドラッグすると、マウスの位置が左上隅に移動します。

コードをコピー

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

if（dv.releasecapture）{
dv.releasecapture（）;
}
else if（window.releasevents）{
mouseup）;
}}
d.onmousemove = null;
d.onmouseup = null;

このコードは、マウスが放された後にドキュメントの onmousemove と onmouseup をキャンセルします。

私は最近 js を勉強していますが、今後は皆さんと一緒に学び、進歩していきたいと思っています。