Comment utiliser les plugins draggable() et redimensionnables() de jQuery avec l'échelle de transformation CSS sur les éléments enfants ?

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

Ce problème survient lors de l'application d'une transformation CSS avec mise à l'échelle à un élément, puis de l'utilisation du déplaçable de jQuery () et redimensionnables() sur les enfants de cet élément. Le problème est que les modifications basées sur jQuery semblent "désynchronisées" avec les mouvements de la souris en raison de l'échelle appliquée.

Solution originale

Une solution corrigée a été trouvée sur StackOverflow qui suggérait de modifier le plugin jQuery. Plus précisément, les fonctions _mouseStart() et _generatePosition() ont été modifiées pour tenir compte de la mise à l'échelle :

• _mouseStart() patché par Monkey pour ajuster les valeurs de décalage d'un facteur égal à l'échelle appliquée.
• Dans _generatePosition(), le mouvement a été ajusté en fonction du facteur d'échelle pour garantir un bon alignement des éléments déplacés/redimensionnés.

Solution améliorée

Par la suite, une solution plus élégante a été découverte qui élimine le besoin de modifier jQuery. Cette approche implique la définition de gestionnaires de rappel pour les événements redimensionnables et déplaçables :

Redimensionnable :

$(this).resizable({
    // Set very large and negative minWidth and minHeight
    minWidth: -(contentElem.width()) * 10,
    minHeight: -(contentElem.height()) * 10, 
    resize: function(event, ui) {
        // Calculate the change in width and height
        var changeWidth = ui.size.width - ui.originalSize.width;
        var changeHeight = ui.size.height - ui.originalSize.height;

        // Adjust the new width and height by dividing the change by the zoomScale
        var newWidth = ui.originalSize.width + changeWidth / zoomScale;
        var newHeight = ui.originalSize.height + changeHeight / zoomScale;

        // Update the ui.size object with the adjusted values
        ui.size.width = newWidth;
        ui.size.height = newHeight;
    }
});

Draggable :

$(this).draggable({
    handle: '.drag-handle', // Specify a handle element for dragging
    start: function(event, ui) {
        // Reset the ui.position object to {left: 0, top: 0} at the start of the drag
        ui.position.left = 0;
        ui.position.top = 0;
    },
    drag: function(event, ui) {
        // Calculate the change in left and top positions
        var changeLeft = ui.position.left - ui.originalPosition.left;
        var changeTop = ui.position.top - ui.originalPosition.top;

        // Adjust the new left and top positions by dividing the change by the zoomScale
        var newLeft = ui.originalPosition.left + changeLeft / zoomScale;
        var newTop = ui.originalPosition.top + changeTop / zoomScale;

        // Update the ui.position object with the adjusted values
        ui.position.left = newLeft;
        ui.position.top = newTop;
    }
});

En utilisant ces gestionnaires de rappel, les éléments déplaçables et redimensionnables fonctionneront désormais correctement dans l'élément mis à l'échelle sans qu'il soit nécessaire de modifier jQuery ou d'implémenter des solutions de correctifs complexes.

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!