CSS Transform Scale を使用した jQuery のドラッグ/サイズ変更

この質(zhì)問は、CSS 変換を持つ div 內(nèi)の子要素に jQuery のドラッグ可能およびサイズ変更可能なプラグインを適用する問題を中心にしています。 (マトリックス) がそれに適用されます。この問題は、子要素がドラッグまたはサイズ変更されるときに発生します。これは、jQuery によって行われた調(diào)整が、適用されたスケールに対応する係數(shù)だけマウスの位置と同期していないためです。

解決策

後いくつかの実験を行った結(jié)果、ユーザーは jQuery のドラッグ可能でサイズ変更可能なプラグインにパッチを適用するという解決策を見つけました。パッチ適用されたコードの概要は次のとおりです。

• Monkey Patching MouseStart(): このパッチは、要素の変換スケール。
• getViewOffset(): この関數(shù)は、適用された変換の下で要素のオフセットを正しく計(jì)算するのに役立ちます。

jQuery のドラッグ/サイズ変更Patch

次のコードは、jQuery UI のドラッグ可能なプラグインの MouseStart() 関數(shù)とgeneratePosition() 関數(shù)の変更を示しています。

function monkeyPatch_mouseStart() {

  // Monkey patch mouseStart function

  $.ui.draggable.prototype._mouseStart = function(event) {
    
    // Calculate adjusted offset
    this.offset = this.positionAbs = getViewOffset(this.element[0]);
  }

}

function generatePosition(event) {

  // Calculate adjusted position
  this.top = (
    pageY                               // Absolute mouse position
    - this.offset.click.top                         // Click offset
    - this.offset.relative.top                        // Element's initial position
    + ($.browser.safari &amp;&amp; $.browser.version < 526 &amp;&amp; this.cssPosition == 'fixed' ? 0 : ( this.cssPosition == 'fixed' ? -this.scrollParent.scrollTop() : ( this.scrollParent.scrollTop() ) ))
  );

  this.left = (
    pageX                                // Absolute mouse position
    - this.offset.click.left                        // Click offset
    - this.offset.relative.left                       // Element's initial position
    + ($.browser.safari &amp;&amp; $.browser.version < 526 &amp;&amp; this.cssPosition == 'fixed' ? 0 : ( this.cssPosition == 'fixed' ? -this.scrollParent.scrollLeft() : scrollIsRootNode ? 0 : this.scrollParent.scrollLeft() ))
  );
}

jQuery の代替

ドラッグ アンド サイズ変更機(jī)能を処理するための jQuery の代替手段として、考慮すべきオプションがいくつかあります:

• バニラ JavaScript: ネイティブ JavaScript イベントを使用してドラッグ アンド ドロップ機(jī)能を?qū)g裝できます。
• React.js: React は、これらのインタラクションを管理するための useDrag や useResize などのフックのセットを提供します。
• Vue.js: Vuex はドラッグをサポートしますuseDrag() フックを介した -and-drop インタラクション。

さらなる改善

ユーザーは、jQuery プラグイン內(nèi)のコールバック ハンドラーを含むソリューションも提供します。この方法では、プラグイン コードにパッチを適用する必要がなく、スケール係數(shù)を利用して、ドラッグとサイズ変更の操作中に幅、高さ、位置を調(diào)整します。

// Resizable callback handler
$(this).resizable({
    ...
    resize: function(event, ui) {
        // Adjust width and height relative to scale
        ui.size.width = ui.originalSize.width + (ui.size.width - ui.originalSize.width) / zoomScale;
        ui.size.height = ui.originalSize.height + (ui.size.height - ui.originalSize.height) / zoomScale;
    }
});

// Draggable callback handler
$(this).draggable({
    ...
    drag: function(event, ui) {
        // Adjust position relative to scale
        ui.position.left = ui.originalPosition.left + (ui.position.left - ui.originalPosition.left) / zoomScale;
        ui.position.top = ui.originalPosition.top + (ui.position.top - ui.originalPosition.top) / zoomScale;
    }
});

この代替方法は、ドラッグとサイズ変更のイベントを管理するための便利なソリューションです。 jQuery プラグイン自體を変更せずに、変換スケールが適用された要素內(nèi)で。

以上がjQuery のドラッグ/サイズ変更を CSS Transform Scale で機(jī)能させるにはどうすればよいですか?の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。