Comment faire fonctionner le glisser/redimensionner jQuery avec l'échelle de transformation CSS ?

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

Cette question est centrée sur la question de l'application de plugins déplaçables et redimensionnables jQuery aux éléments enfants d'un div qui a une transformation CSS (matrice) qui lui est appliquée. Le problème survient lorsque les éléments enfants sont déplacés ou redimensionnés, car les ajustements effectués par jQuery sont désynchronisés avec la position de la souris d'un facteur correspondant à l'échelle appliquée.

La solution

Après Après quelques expérimentations, l'utilisateur a trouvé une solution qui impliquait de corriger les plugins déplaçables et redimensionnables de jQuery. Voici un résumé du code corrigé :

• Monkey Patching mouseStart() : Ce correctif garantit que la position de l'élément d'assistance est calculée correctement en ajustant le décalage de la souris en fonction du échelle de transformation de l'élément.
• getViewOffset() : Cette fonction aide à calculer correctement le décalage de l'élément sous la transformation appliquée.

Le glisser/redimensionner jQuery Patch

Le code suivant démontre la modification des fonctions mouseStart() et generatePosition() dans le plugin déplaçable de jQuery UI :

function monkeyPatch_mouseStart() {

  // Monkey patch mouseStart function

  $.ui.draggable.prototype._mouseStart = function(event) {
    
    // Calculate adjusted offset
    this.offset = this.positionAbs = getViewOffset(this.element[0]);
  }

}

function generatePosition(event) {

  // Calculate adjusted position
  this.top = (
    pageY                               // Absolute mouse position
    - this.offset.click.top                         // Click offset
    - this.offset.relative.top                        // Element's initial position
    + ($.browser.safari &amp;&amp; $.browser.version < 526 &amp;&amp; this.cssPosition == 'fixed' ? 0 : ( this.cssPosition == 'fixed' ? -this.scrollParent.scrollTop() : ( this.scrollParent.scrollTop() ) ))
  );

  this.left = (
    pageX                                // Absolute mouse position
    - this.offset.click.left                        // Click offset
    - this.offset.relative.left                       // Element's initial position
    + ($.browser.safari &amp;&amp; $.browser.version < 526 &amp;&amp; this.cssPosition == 'fixed' ? 0 : ( this.cssPosition == 'fixed' ? -this.scrollParent.scrollLeft() : scrollIsRootNode ? 0 : this.scrollParent.scrollLeft() ))
  );
}

Alternative à jQuery

Pour ceux qui recherchent Alternatives à jQuery pour gérer la fonctionnalité de glisser-déposer, voici quelques options à considérer :

• Vanilla JavaScript : Vous pouvez implémenter la fonctionnalité de glisser-déposer à l'aide d'événements JavaScript natifs.
• React.js : React fournit un ensemble de hooks comme useDrag et useResize pour gérer ces interactions.
• Vue.js : Vuex prend en charge le glisser -and-drop interactions via le hook useDrag().

Amélioration supplémentaire

L'utilisateur fournit également une solution impliquant des gestionnaires de rappel dans les plugins jQuery. Cette méthode ne nécessite pas de patcher le code du plugin et utilise des facteurs d'échelle pour ajuster la largeur, la hauteur et la position lors des opérations de glisser et de redimensionner.

// Resizable callback handler
$(this).resizable({
    ...
    resize: function(event, ui) {
        // Adjust width and height relative to scale
        ui.size.width = ui.originalSize.width + (ui.size.width - ui.originalSize.width) / zoomScale;
        ui.size.height = ui.originalSize.height + (ui.size.height - ui.originalSize.height) / zoomScale;
    }
});

// Draggable callback handler
$(this).draggable({
    ...
    drag: function(event, ui) {
        // Adjust position relative to scale
        ui.position.left = ui.originalPosition.left + (ui.position.left - ui.originalPosition.left) / zoomScale;
        ui.position.top = ui.originalPosition.top + (ui.position.top - ui.originalPosition.top) / zoomScale;
    }
});

Cette méthode alternative est une solution pratique pour gérer les événements de glisser et de redimensionner. dans les éléments avec des échelles de transformation appliquées sans modifier les plugins jQuery eux-mêmes.

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!