JavaScript オブジェクト指向の実践の詳細説明: カプセル化とオブジェクトのドラッグ

// 現在のブラウザでサポートされている変換互換の書き込みメソッドを取得する関数 getTransform() {
    var 変換 = ''、
    divStyle = document.createElement('div').style,
    // 互換性のある書き込み方法が複数ある場合があり、ブラウザが認識するものはループを通じて見つけられます。 transformArr = ['transform', 'webkitTransform', 'MozTransform', 'msTransform', 'OTransform'],

    i = 0,
    len = transformArr.length;

    for(; i < len; i++) {
        if (transformArr[i] が divStyle にある) {
            // 見つけたらすぐに戻り、関数を終了します。 return transform = transformArr[i];
        }
    }

    // 見つからない場合は、空の文字列を返します。 return transform;
}

関数 getStyle(要素, プロパティ) {
    // つまり、要素のスタイルを取得するために currentStyle を使用し、他のブラウザは getComputedStyle を使用して取得します。 return document.defaultView.getComputedStyle ? document.defaultView.getComputedStyle(elem, false)[property] : elem.currentStyle[property];
}

関数 getTargetPos(要素) {
    var pos = {x: 0, y: 0};
    var transform = getTransform();
    if(変換) {
        var transformValue = getStyle(elem, transform);
        if(変換値 == 'なし') {
            elem.style[transform] = 'translate(0, 0)';
            位置を返します。
        } それ以外 {
            var temp = transformValue.match(/-?\d+/g);
            戻り値 pos = {
                x: parseInt(temp[4].trim())、
                y: parseInt(temp[5].trim())
            }
        }
    } それ以外 {
        if(getStyle(elem, 'position') == 'static') {
            elem.style.position = '相対';
            位置を返します。
        } それ以外 {
            var x = parseInt(getStyle(elem, 'left') ? getStyle(elem, 'left') : 0);
            var y = parseInt(getStyle(elem, 'top') ? getStyle(elem, 'top') : 0);
            戻り値 pos = {
                x: x,
                y: y
            }
        }
    }
}

// 位置 = { x: 200, y: 100 }
関数setTargetPos(要素, pos) {
    var transform = getTransform();
    if(変換) {
        elem.style[transform] = 'translate('+ pos.x +'px, '+ pos.y +'px)';
    } それ以外 {
        elem.style.left = pos.x + 'px';
        elem.style.top = pos.y + 'px';
    }
    要素を返します。
}

// ターゲット要素オブジェクトを取得します。 var oElem = document.getElementById('target');

// マウスの初期位置の x 座標と y 座標を保存するための 2 つの変数を宣言します。var startX = 0;
var 開始Y = 0;

// ターゲット要素の初期位置の x 座標と y 座標を保存するための 2 つの変数を宣言します。var sourceX = 0;
var ソースY = 0;

// 現在のブラウザでサポートされている変換互換の書き込みメソッドを取得する関数 getTransform() {}

// 要素のプロパティを取得する function getStyle(elem, property) {}

// 要素の初期位置を取得する function getTargetPos(elem) {}

// 要素の初期位置を設定する function setTargetPos(elem, potions) {}

//マウスダウン時のコールバックにバインドされ、eventは受信イベントオブジェクトです。function start(event) {
    // マウスの初期位置を取得します。startX = event.pageX;
    イベントページY

    // 要素の初期位置を取得します。var pos = getTargetPos(oElem);

    ソースX = pos.x;
    ソースY = pos.y;

    // バインディング document.addEventListener('mousemove', move, false);
    document.addEventListener('mouseup', end, false);
}

関数move(イベント) {
    // マウスの現在の位置を取得します。var currentX = event.pageX;
    var currentY = イベント.pageY;

    // 差を計算します var distanceX = currentX - startX;
    var 距離Y = 現在のY - 開始Y;

    // 要素の現在の位置を計算して設定する setTargetPos(oElem, {
        x: (sourceX + distanceX).toFixed(),
        y: (ソースY + 距離Y).toFixed()
    })
}

関数終了(イベント) {
    document.removeEventListener('mousemove', 移動);
    document.removeEventListener('mouseup', 終了);
    // 他のことを行う
}

（関数（） {
    ...
})();

（関数（） {
    // これはプライベート プロパティであり、インスタンスによってアクセスする必要はありません var transform = getTransform();

    関数ドラッグ(セレクタ) {
        // コンストラクター内に配置されたプロパティは、各インスタンスに個別に属します。 this.elem = typeof selector == 'Object' ? selector : document.getElementById(selector);
        this.startX = 0;
        this.startY = 0;
        this.sourceX = 0;
        this.sourceY = 0;

        これを初期化します。
    }


    // プロトタイプ Drag.prototype = {
        コンストラクタ: ドラッグ、

        初期化: 関数() {
            // 最初に行う必要があること this.setDrag();
        },

        // 若干変更されていますが、getName と同様に、現在の要素の属性を取得するためにのみ使用されます。
        getStyle: 関数(プロパティ) {
            document.defaultView.getComputedStyle を返します? document.defaultView.getComputedStyle(this.elem, false)[プロパティ] : this.elem.currentStyle[プロパティ];
        },

        // 現在の要素の位置情報を取得するために使用します。前の getPosition: function() との違いに注意してください。
            var pos = {x: 0, y: 0};
            if(変換) {
                var transformValue = this.getStyle(transform);
                if(変換値 == 'なし') {
                    this.elem.style[transform] = 'translate(0, 0)';
                } それ以外 {
                    var temp = transformValue.match(/-?\d+/g);
                    位置 = {
                        x: parseInt(temp[4].trim())、
                        y: parseInt(temp[5].trim())
                    }
                }
            } それ以外 {
                if(this.getStyle('position') == 'static') {
                    this.elem.style.position = '相対';
                } それ以外 {
                    位置 = {
                        x: parseInt(this.getStyle('left') ? this.getStyle('left') : 0),
                        y: parseInt(this.getStyle('top') ? this.getStyle('top') : 0)
                    }
                }
            }

            位置を返します。
        },

        // 現在の要素の位置を設定するために使用します setPosition: function(pos) {
            if(変換) {
                this.elem.style[transform] = 'translate('+ pos.x +'px, '+ pos.y +'px)';
            } それ以外 {
                this.elem.style.left = pos.x + 'px';
                this.elem.style.top = pos.y + 'px';
            }
        },

        // このメソッドはイベントをバインドするために使用されます setDrag: function() {
            var self = this;
            this.elem.addEventListener('mousedown', 開始, false);
            関数開始(イベント) {
                イベントページを生成
                イベントページYをself.startYに代入します。

                var pos = self.getPosition();

                自己ソースX = pos.x;
                自己のソースY = pos.y;

                document.addEventListener('mousemove', 移動, false);
                document.addEventListener('mouseup', end, false);
            }

            関数move(イベント) {
                var currentX = イベント.pageX;
                var currentY = イベント.pageY;

                var 距離X = 現在のX - 自己開始X;
                var 距離Y = 現在のY - 自己開始Y;

                自己.setPosition({
                    x: (self.sourceX + distanceX).toFixed(),
                    y: (self.sourceY + distanceY).toFixed()
                })
            }

            関数終了(イベント) {
                document.removeEventListener('mousemove', 移動);
                document.removeEventListener('mouseup', 終了);
                // 他のことを行う
            }
        }
    }

    // プライベートメソッド。変換関数の互換性のある書き込みメソッドを取得するためにのみ使用されます。getTransform() {
        var 変換 = ''、
            divStyle = document.createElement('div').style,
            transformArr = ['transform', 'webkitTransform', 'MozTransform', 'msTransform', 'OTransform'],

            i = 0,
            len = transformArr.length;

        for(; i < len; i++) {
            if (transformArr[i] が divStyle にある) {
                戻り値: transform = transformArr[i];
            }
        }

        変換を返します。
    }

    // 外の世界に公開する方法 window.Drag = Drag;
})();

// 使用法: 2 つのドラッグ インスタンスを宣言します。new Drag('target');
新しいドラッグ('target2');