## Wie behebe ich jQuery-Drag/Resize-Diskrepanzen mit der CSS-Transformationsskala?

jQuery Drag/Resize mit CSS-Transformationsskala

Problem:

Anwenden von CSS-Transformationen ( (einschließlich Matrixskalierung) auf Elemente führt zu Diskrepanzen beim Ziehen und Ändern der Größe, die mit den jQuery-Plugins Draggable() und Resizable() ausgeführt werden.

Lösung:

Ein Benutzer hat einen Patch vorgeschlagen Dadurch wurden die jQuery-Plugins geändert, aber diese Lösung erforderte die Bearbeitung der Plugin-Dateien.

Alternativer Ansatz:

Alternativ können Sie das Patchen von jQuery vermeiden, indem Sie Callback-Handler im Draggable verwenden und anpassbare Konfigurationen. Dieser Ansatz passt die neuen Abmessungen und Positionen basierend auf dem Zoommaßstab während dieser Ereignisse an.

Code:

Für Resizable:

<code class="js">$(this).resizable({
  minWidth: -(contentElem.width()) * 10,
  minHeight: -(contentElem.height()) * 10,
  resize: function(event, ui) {
    var changeWidth = ui.size.width - ui.originalSize.width;
    var newWidth = ui.originalSize.width + changeWidth / zoomScale;
    var changeHeight = ui.size.height - ui.originalSize.height;
    var newHeight = ui.originalSize.height + changeHeight / zoomScale;
    ui.size.width = newWidth;
    ui.size.height = newHeight;
  }
});</code>

Für Draggable:

<code class="js">$(this).draggable({
  handle: '.drag-handle',
  start: function(event, ui) {
    ui.position.left = 0;
    ui.position.top = 0;
  },
  drag: function(event, ui) {
    var changeLeft = ui.position.left - ui.originalPosition.left;
    var newLeft = ui.originalPosition.left + changeLeft / ((zoomScale));
    var changeTop = ui.position.top - ui.originalPosition.top;
    var newTop = ui.originalPosition.top + changeTop / zoomScale;
    ui.position.left = newLeft;
    ui.position.top = newTop;
  }
});</code>

In diesen Codeausschnitten ist zoomScale eine globale Variable, die den aktuellen Maßstab des transformierten Elements darstellt.

Diese Lösung Bietet eine nicht-invasive Methode zum Ziehen und Ändern der Größe innerhalb skalierter Elemente mithilfe der Plugins von jQuery.

Das obige ist der detaillierte Inhalt von## Wie behebe ich jQuery-Drag/Resize-Diskrepanzen mit der CSS-Transformationsskala?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!