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

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

Barbara Streisand
Libérer: 2024-10-27 10:51:30
original
506 Les gens l'ont consulté

How to use jQuery's draggable() and resizable() plugins with CSS transform scale on child elements?

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;
    }
});
Copier après la connexion

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;
    }
});
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal