## Comment résoudre les écarts de glisser/redimensionner jQuery avec l'échelle de transformation CSS ?

Drag/Redimensionner jQuery avec l'échelle de transformation CSS

Problème :

Application des transformations CSS ( y compris la mise à l'échelle de la matrice) sur les éléments provoque des écarts dans les opérations de glisser et de redimensionnement effectuées avec les plugins draggable() et resizing() de jQuery.

Solution :

Un utilisateur a proposé un correctif qui a modifié les plugins jQuery, mais cette solution nécessitait de modifier les fichiers du plugin.

Approche alternative :

Vous pouvez également éviter de patcher jQuery en utilisant des gestionnaires de rappel dans le déplaçable et configurations redimensionnables. Cette approche ajuste les nouvelles dimensions et positions en fonction de l'échelle de zoom lors de ces événements.

Code :

Pour redimensionnable :

<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>

Pour 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>

Dans ces extraits de code, zoomScale est une variable globale représentant l'échelle actuelle de l'élément transformé.

Cette solution fournit une méthode non intrusive pour gérer le glisser et le redimensionnement dans les éléments mis à l'échelle à l'aide des plugins jQuery.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!