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

}

});

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

}

});

Dans le gestionnaire de déplacement, calculez le changement des positions gauche et supérieure, appliquez l'inverse de l'échelle de zoom pour ajuster les nouvelles positions gauche et supérieure, et mettez à jour le ui.position de l'objet en conséquence.

Conclusion

Cette solution alternative utilisant des gestionnaires de rappel fournit un moyen non invasif de corriger le comportement de glisser/redimensionner lorsque les transformations CSS avec échelle sont appliqué.

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!