js_javascript スキルを使用したシンプルなドラッグ アンド ドロップ効果

フロントエンド開発ではドラッグエフェクトが使われる場面が多いですが、もちろんhttp://jqueryui.com/draggable/は良い選択ですが、私は欲しい派です。質問するために、js を使用して同様のプラグインを実装するのに少し時間がかかりましたが、あまり言うことはありません。

最初: html と css

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

<頭>


<スタイル>
* {
マージン: 0;
パディング: 0;
}
#div1 {
位置: 絶対;
幅: 100px;
高さ: 100px;
カーソル: 移動;
背景色: 赤;
}

さて、最初にメインのアルゴリズムを実装しましょう:

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

<スクリプト>
window.onload = function () {
//ドラッグする必要がある div を取得します
var div1 = document.getElementById("div1");
//マウスプレスイベントを追加
div1.onmousedown = function (evt) {
var oEvent = evt ||
// マウスボタンから div 左上までの距離を取得します
var distanceX = oEvent.clientX - div1.offsetLeft;
var distanceY = oEvent.clientX - div1.offsetTop;
//ドキュメントのスライド時間を追加
document.onmousemove = function (evt) {
var oEvent = evt ||
//div
の左上の値を再計算します var left = oEvent.clientX - distanceX;
var top = oEvent.clientY - distanceY;
//left ゼロ以下の場合、div がドキュメントからドラッグされないようにするには、ゼロに設定します
If (left left = 0;
}
//左がドキュメントの右境界を超える場合は、右境界に設定します
else if (left >= document.documentElement.clientWidth - div1.offsetWidth) {
left = document.documentElement.clientWidth - div1.offsetWidth;
}
If (top トップ = 0;
}
else if (top >= document.documentElement.clientHeight - div1.offsetHeight) {
トップ = document.documentElement.clientHeight - div1.offsetHeight;
}
//値を div
に再割り当てします div1.style.top = トップ "px";
div1.style.left = left "px";
}
//マウスリフトイベントを追加
div1.onmouseup = function () {
                                                                                                                                                                document.onmousemove = null;
div1.onmouseup = null;
}
}
}

はい、オブジェクト指向実装を使用してください

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

<スタイル>
* {
margin:0;
パディング:0;
}
#div1 {
幅: 100px;
高さ: 100px;
背景色: 赤;
}
#div2 {
背景色:黄色;
幅:100px;
高さ:100px;
}

js ドラッグ クラス:

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

 関数ドラッグ(id) {
            this.div = document.getElementById(id);
            if (this.div) {
                this.div.style.cursor = "移動";
                this.div.style.position = "絶対";
            }
            this.disX = 0;
            this.disY = 0;
            var _this = this;
            this.div.onmousedown = function (evt) {
                _this.getDistance(evt);
                document.onmousemove = function (evt) {
                    _this.setPosition(evt);
                }
                _this.div.onmouseup = function () {
                    _this.clearEvent();
                }
            }
        }
        Drag.prototype.getDistance = function (evt) {
            var oEvent = evt ||イベント;
            this.disX = oEvent.clientX - this.div.offsetLeft;
            this.disY = oEvent.clientY - this.div.offsetTop;
        }
        Drag.prototype.setPosition = function (evt) {
            var oEvent = evt ||イベント;
            var l = oEvent.clientX - this.disX;
            var t = oEvent.clientY - this.disY;
            if (l                 l = 0;
            }
            else if (l >= document.documentElement.clientWidth - this.div.offsetWidth) {
                l = document.documentElement.clientWidth - this.div.offsetWidth;
            }
            if (t                 t = 0;
            }
            else if (t >= document.documentElement.clientHeight - this.div.offsetHeight) {
                t = document.documentElement.clientHeight - this.div.offsetHeight;
            }
            this.div.style.left = l "px";
            this.div.style.top = t "px";
        }
        Drag.prototype.clearEvent = function () {
            this.div.onmouseup = null;
            document.onmousemove = null;
        }

ついに: 最終実装:

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

window.onload = function () {
new Drag("div1");
new Drag("div2");
}

効果は次のとおりです:

上記がこの記事の全内容です。これが皆さんが JavaScript をより上手に使いこなすのに役立つことを願っています。