Comment résoudre les problèmes de glisser/redimensionner jQuery avec l'échelle de transformation CSS ?

Drag/Redimensionner jQuery 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 de 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.

Corriger l'échelle de transformation pour le 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 aucun de ses éléments. fonctionnalité de base.

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!