Jquery draggable avec problème de zoom

Je suis en train de travailler sur une page dans la sorcière de l'ensemble de son contenu sont mis à l'échelle en utilisant le zoom.
Le problème est que lorsque je fais glisser quelque chose dans la page en la faisant glisser l'élément obtient une mauvaise position qui semble par rapport à la zoom montant.

Pour résoudre cela, j'ai essayé de faire quelques calculs sur la position de la déplaçable composant, mais il semble que même tho visuellement son corrigé, la "vraie" position de ses pas recalculé.

voici un peu de code pour mieux expliquer:

var zoom = Math.round((parseFloat($("body").css("zoom")) /100)*10)/10;

var x = $(this).data('draggable').position;
$(this).data('draggable').position.left = Math.round(x.left/zoom);
$(this).data('draggable').position.top = Math.round(x.top/zoom);

Toute aide serait grandement appréciée

source d'informationauteur Manuel

A pris beaucoup de temps et d'efforts pour résoudre ce problème, mais enfin, j'ai une solution qui fonctionne.

Cette solution fonctionne pour IE et Firefox. #toile est la div qui contient le déplaçable. Notez que nous devons nous assurer que les éléments reste à l'intérieur de la toile manuellement.

Cela fonctionne aussi si la toile a un autre niveau de zoom que le reste de la page.

var pointerX;
var pointerY;
$(c).draggable({
start : function(evt, ui) {
pointerY = (evt.pageY - $('#canvas').offset().top) / zoom - parseInt($(evt.target).css('top'));
pointerX = (evt.pageX - $('#canvas').offset().left) / zoom - parseInt($(evt.target).css('left'));
},
drag : function(evt, ui) {
var canvasTop = $('#canvas').offset().top;
var canvasLeft = $('#canvas').offset().left;
var canvasHeight = $('#canvas').height();
var canvasWidth = $('#canvas').width();
//Fix for zoom
ui.position.top = Math.round((evt.pageY - canvasTop) / zoom - pointerY); 
ui.position.left = Math.round((evt.pageX - canvasLeft) / zoom - pointerX); 
//Check if element is outside canvas
if (ui.position.left < 0) ui.position.left = 0;
if (ui.position.left + $(this).width() > canvasWidth) ui.position.left = canvasWidth - $(this).width();  
if (ui.position.top < 0) ui.position.top = 0;
if (ui.position.top + $(this).height() > canvasHeight) ui.position.top = canvasHeight - $(this).height();  
//Finally, make sure offset aligns with position
ui.offset.top = Math.round(ui.position.top + canvasTop);
ui.offset.left = Math.round(ui.position.left + canvasLeft);
}
});

2

De référence pour l'avenir - si quelqu'un serait jamais rencontrer le même problème - une question similaire + travail réponse peut être trouvée ici.

Si CSS Zoom est effectué spécifiquement sur le corps html, il est très facile à corriger, mais il ne vous obliger à modifier le code source. C'est un no-go pour certains, mais je vais poster la solution ici de toute façon.

Afin de selection des fonctionnalités de jQuery UI chiffres de la mouseposition à l'aide d'une méthode appelée _generatePosition. Le problème est qu'il ne prend pas de zoom en compte (duh), de sorte nous n'avons qu'à diviser son résultat par le niveau de zoom et tout fonctionnera.

Afin de transformer ceci:

    return {
top: (
//The absolute mouse position
pageY -
//Click offset (relative to the element)
this.offset.click.top -
//Only for relative positioned nodes: Relative offset from element to offset parent
this.offset.relative.top -
//The offsetParent's offset without borders (offset + border)
this.offset.parent.top +
( this.cssPosition === "fixed" ?
-this.offset.scroll.top :
( scrollIsRootNode ? 0 : this.offset.scroll.top ) )
)/ ,
left: (
//The absolute mouse position
pageX -
//Click offset (relative to the element)
this.offset.click.left -
//Only for relative positioned nodes: Relative offset from element to offset parent
this.offset.relative.left -
//The offsetParent's offset without borders (offset + border)
this.offset.parent.left +
( this.cssPosition === "fixed" ?
-this.offset.scroll.left :
( scrollIsRootNode ? 0 : this.offset.scroll.left ) )
)
};

dans

    var zoomLevel = parseFloat($('body').css("zoom") || "1.0");
return {
top: (
//The absolute mouse position
pageY -
//Click offset (relative to the element)
this.offset.click.top -
//Only for relative positioned nodes: Relative offset from element to offset parent
this.offset.relative.top -
//The offsetParent's offset without borders (offset + border)
this.offset.parent.top +
( this.cssPosition === "fixed" ?
-this.offset.scroll.top :
( scrollIsRootNode ? 0 : this.offset.scroll.top ) )
) / zoomLevel,
left: (
//The absolute mouse position
pageX -
//Click offset (relative to the element)
this.offset.click.left -
//Only for relative positioned nodes: Relative offset from element to offset parent
this.offset.relative.left -
//The offsetParent's offset without borders (offset + border)
this.offset.parent.left +
( this.cssPosition === "fixed" ?
-this.offset.scroll.left :
( scrollIsRootNode ? 0 : this.offset.scroll.left ) )
) / zoomLevel
};

C'est tout. Je suggère de l'enregistrer sous un nom spécifique, donc il est facilement reconnu qu'il a été modifié. E. g.: jquery-ui.ZOOMFIX.js

J'ai utilisé le jquery-ui.js fichier dans le package suivant: https://jqueryui.com/resources/download/jquery-ui-1.12.1.zip

Prenez-vous la position de défilement, la marge et le remplissage en compte? Tels que:

x.left + 
parseInt($(this).css('margin-left')) + 
parseInt($(this).css('padding-left')) + 
parseInt($(this).parent().scrollLeft());
x.top + 
parseInt($(this).css('margin-top')) + 
parseInt($(this).css('padding-top')) + 
parseInt($(this).parent().scrollTop());

Puis en ajustant la valeur du zoom en cas de besoin?

0

J'ai eu du mal avec cela pour quelques heures. J'avais une grille où j'ai commencé avec le passage à l'échelle par le réglage de la taille de police (125% etc sur le contenant). Cela a bien fonctionné jusqu'à ce que j'en images qui n'ont pas l'échelle de la grille.

J'ai pensé utiliser le zoom à la place, et cela a fonctionné à merveille. Puis j'ai réalisé par déplaçable/drop n'était pas mise à l'échelle avec elle hmm.. Passer plusieurs heures à essayer de le détruire et de le ré-initialiser le jqueryUI objets, mais rien n'a fonctionné.

Puis finalement j'ai réalisé que je pouvais utiliser une combinaison de la taille de police pour le zoom avant de la grille et css-zoom pour les images. Maintenant, tout fonctionne et je peux glisser/déposer avec la même instance de jQueryUI.

Espérons que cette approche contribue à quelqu'un d'autre. 🙂

var zoom = $('#canvas').css('zoom');    
$('#dragme').draggable({
drag: function(evt,ui)
{
var factor = (1 / zoom) -1);
ui.position.top += Math.round((ui.position.top - ui.originalPosition.top) * factor);
ui.position.left += Math.round((ui.position.left- ui.originalPosition.left) * factor);    
}                 
});

Vous devez vous connecter pour publier un commentaire.