jQuery のドラッグ/サイズ変更を CSS Transform Scale で機能させるにはどうすればよいですか?

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

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

解決策

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

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

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

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

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 の代替

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

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

さらなる改善

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

// 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 プラグイン自体を変更せずに、変換スケールが適用された要素内で。

以上がjQuery のドラッグ/サイズ変更を CSS Transform Scale で機能させるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。