Wie funktioniert das Ziehen/Ändern der Größe von jQuery mit der CSS-Transformationsskala?

jQuery Drag/Resize with CSS Transform Scale

Diese Frage dreht sich um das Problem der Anwendung von jQuery-Plugins, die ziehbar und in der Größe veränderbar sind, auf untergeordnete Elemente innerhalb eines Divs, das über eine CSS-Transformation verfügt (Matrix) darauf angewendet. Das Problem tritt auf, wenn die untergeordneten Elemente gezogen oder in der Größe geändert werden, da die von jQuery vorgenommenen Anpassungen um einen Faktor, der der angewendeten Skalierung entspricht, nicht mit der Mausposition synchron sind.

Die Lösung

Nachher Nach einigen Experimenten fand der Benutzer eine Lösung, bei der die ziehbaren und in der Größe veränderbaren Plugins von jQuery gepatcht wurden. Hier ist eine Zusammenfassung des gepatchten Codes:

• Monkey Patching mouseStart(): Dieser Patch stellt sicher, dass die Position des Hilfselements korrekt berechnet wird, indem der Mausversatz basierend auf angepasst wird Transformationsskalierung des Elements.
• getViewOffset(): Diese Funktion hilft bei der korrekten Berechnung des Offsets des Elements unter der angewendeten Transformation.

Das jQuery Drag/Resize Patch

Der folgende Code demonstriert die Änderung der Funktionen „mouseStart()“ und „generatePosition()“ im ziehbaren Plugin der jQuery-Benutzeroberfläche:

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() ))
  );
}

Alternative zu jQuery

Für diejenigen, die suchen Alternativen zu jQuery für die Handhabung der Drag-and-Resize-Funktionalität. Hier sind einige Optionen, die Sie in Betracht ziehen sollten:

• Vanilla JavaScript: Sie können Drag-and-Drop-Funktionalität mithilfe nativer JavaScript-Ereignisse implementieren.
• React.js: React bietet eine Reihe von Hooks wie useDrag und useResize für die Verwaltung dieser Interaktionen.
• Vue.js: Vuex unterstützt Drag -and-Drop-Interaktionen über den useDrag()-Hook.

Weitere Verbesserung

Der Benutzer stellt auch eine Lösung mit Callback-Handlern innerhalb der jQuery-Plugins bereit. Diese Methode erfordert kein Patchen des Plugin-Codes und nutzt Skalierungsfaktoren, um die Breite, Höhe und Position während Drag- und Größenänderungsvorgängen anzupassen.

// 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;
    }
});

Diese alternative Methode ist eine praktische Lösung für die Verwaltung von Drag- und Größenänderungsereignissen in Elementen mit angewendeten Transformationsskalen, ohne die jQuery-Plugins selbst zu ändern.

Das obige ist der detaillierte Inhalt vonWie funktioniert das Ziehen/Ändern der Größe von jQuery mit der CSS-Transformationsskala?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!