JQuery Glisser/Redimensionner avec l'échelle de transformation CSS

Problème : Lors de l'application d'une transformation CSS, spécifiquement transform : matrice (0.5, 0, 0, 0.5, 0, 0);, à un div et en utilisant les plugins draggable() et redimensionnables() de jQuery sur les éléments enfants, la modification effectuée par jQuery devient "désynchronisée" avec la position de la souris.

Solution : Corriger les plugins jQuery

Une solution a été trouvée en patchant les plugins jQuery, en particulier les méthodes _mouseStart et _generatePosition de $.ui.draggable. Cette approche a fonctionné efficacement mais a nécessité la modification du code du plugin d'origine.

Solution alternative : utilisation des gestionnaires de rappel

Cependant, une solution plus optimale a été découverte qui ne nécessite pas de modifier le plugins jQuery directement. En utilisant des gestionnaires de rappel, il est possible d'ajuster les positions et les tailles des éléments déplaçables et redimensionnables en fonction de l'échelle de zoom actuelle.

Correction de l'échelle de transformation pour redimensionnable :

$(this).resizable({
    minWidth: -(contentElem.width()) * 10, 
    minHeight: -(contentElem.height()) * 10, 
    resize: function(event, ui) {
        // Adjust width and height based on zoom scale
        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;
    }
});

Correction de l'échelle de transformation pour Draggable :

$(this).draggable({
    handle: '.drag-handle', 
    start: function(event, ui) {
        ui.position.left = 0;
        ui.position.top = 0;
    }, 
    drag: function(event, ui) {
        // Adjust left and top positions based on zoom scale
        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;
    }
});

Cette approche fournit une solution propre et non invasive pour gérer les événements de glisser et de redimensionnement dans les éléments mis à l'échelle à l'aide de jQuery sans modifier aucune de ses fonctionnalités de base.