Comment obtenir un comportement correct de glisser/redimensionner jQuery avec l'échelle de transformation CSS ?

Correction du glisser/redimensionner jQuery avec l'échelle de transformation CSS

Arrière-plan

Application des transformations CSS à un élément puis l'utilisation des plugins déplaçables et redimensionnables de jQuery sur ses enfants peuvent introduire un désalignement entre le curseur de la souris et l'élément déplacé ou redimensionné. Cela est dû au facteur d'échelle appliqué à l'élément.

Solution de correctifs jQuery

Une solution précédente impliquait de patcher les plugins déplaçables et redimensionnables de jQuery pour ajuster le décalage de la souris par le facteur d’échelle. Cette méthode nécessitait de modifier le code source des plugins.

Solution alternative : gestionnaires de rappel

Une solution alternative consiste à utiliser les gestionnaires de rappel fournis par les plugins redimensionnables et déplaçables. Cela élimine le besoin de patcher jQuery.

Correctif redimensionnable

<br>$(this).resizing({</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">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;

}

Copier après la connexion

});

Dans le gestionnaire de redimensionnement, calculez le changement de largeur et de hauteur, appliquez l'inverse de l'échelle de zoom pour ajuster la nouvelle largeur et hauteur, et mettez à jour le ui.size objet en conséquence.

Correctif déplaçable

<br>$(this).draggable({</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">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;

}

Copier après la connexion