jQuery draggable et -webkit-transform: scale ();

J’ai une situation où à l’intérieur d’une div il y a des articles glissables. Cependant, lorsque la div parent est mise à l’échelle à l’aide de -webkit-transform , l’élément déplaçable cesse manifestement de fonctionner correctement.

J’ai reproduit le scénario ici .

Comme vous pouvez le constater, l’élément déplaçable se déplace par rapport au document, même si le parent est à une échelle totalement différente.

J’ai l’échelle ( 1.5 dans l’exemple) en tant que variable dans JS, donc je peux l’utiliser, mais où? J’aurais besoin de diviser la distance de traînée par la balance, non? Où pourrais-je faire cela?

Edit: J’ai essayé de définir une fonction pour drag -event, mais je n’ai pas été en mesure de déterminer comment modifier réellement la distance de glissement.

Edit2: J’ai fouillé la source de l’interface utilisateur jQuery, et il semble qu’il n’y ait aucun moyen de le faire à partir du drag événement:

 if(this._sortinggger('drag', event, ui) === false) { this._mouseUp({}); return false; } 

Comme vous pouvez le constater, la valeur de retour de la fonction de rappel n’est stockée d’aucune manière. La position de l’élément est modifiée après le déclenchement du rappel. Par conséquent, la modification du code CSS dans le rappel ne fonctionne pas.

Vous pouvez voir le code approprié ici en utilisant la recherche dans le navigateur avec cette chaîne:

 _mouseDrag: function(event, noPropagation) { 

En raison de ma petite expérience de JavaScript, je ne savais pas que le rappel pouvait en fait modifier la position, même s’il ne return rien. En effet, dans JS, les parameters sont apparemment transmis par référence.

Voici un code de travail:

 // Couldn't figure out a way to use the coordinates // that jQuery also stores, so let's record our own. var click = { x: 0, y: 0 }; $('.draggable').draggable({ start: function(event) { click.x = event.clientX; click.y = event.clientY; }, drag: function(event, ui) { // This is the parameter for scale() var zoom = 1.5; var original = ui.originalPosition; // jQuery will simply use the same object we alter here ui.position = { left: (event.clientX - click.x + original.left) / zoom, top: (event.clientY - click.y + original.top ) / zoom }; } }); 

Je pense que vous avez besoin du plugin jQuery Transformable (http://plugins.jquery.com/project/transformable) pour “normaliser” la mise à l’échelle de WebKit. Ensuite, faire glisser fonctionnera comme dans Firefox.

Voici le plugin – http://flin.org/js/jquery.transformable.js . Je pense que cela devrait résoudre votre problème. Voici ma version de votre code: http://jsfiddle.net/vMaXm/4/

 $("#parent").setTransform("scalex", 1.5); //$("#parent").setTransform("scaley", 1.5); $('.draggable').draggable({ containment: "parent" }); 

Un séjour sans faille

Cependant, à ce moment-ci, si je retire le commentaire de la ligne médiane, le problème que vous signalez est identique.