L'utilisation PanZoom jquery aux côtés jquery draggable

Question

J'ai donc ce jquery .draggable éléments qui travaillent à l'intérieur du .droppable et le parent .droppable utilise le jquery .panzoom. Il y a aussi une image pour le fond qui est à l'intérieur .canvasimg.

Voici un arbre de ma structure html:

<div class="wrapper"> //panzoom 
    <div class="canvasimg"> 
     <img src="somebackground"> 
    </div> 
    <div class="droppable"> 

     <div class="draggable"> 
     </div> 
     <div class="draggable"> 
     </div> 

    </div> 
</div> 

Ce que j'ai:

Je le zoom de travail et draggable travail aussi. Le problème est quand je zoome, l'élément traîné doit être sous la souris mais il obtient en quelque sorte la "vraie" position, ou la position d'origine que vous préférez ..

Si je commence mon glisser de la partie supérieure gauche de mon .droppable avec zoom, il commence bien, l'élément est sous la souris, comme ceci:

Mais comme je vais à travers l'écran l'élément commence à « sortir » de la souris, plus je vais à droite et en bas, plus l'élément s'éloigne de la souris, comme ceci:

Ce que j'ai essayé:

Pour mettre en œuvre la réponse sur this question, mais depuis que je suis sauver la position via ajax, je ne suis pas très sûr de savoir comment puis-je l'utiliser, si la réponse à cette question est dans ce code:

var m = map.panzoom('getMatrix'); 
var zoom = Math.sqrt(m[0] * m[3]); // zoom don't change proportion and scale 
var original = ui.originalPosition; 

ui.position = { 
    left: (e.clientX - click.x + original.left)/zoom, 
    top: (e.clientY - click.y + original.top)/zoom 
}; 

J'ai essayé de l'utiliser, mais pas de succès.

ce que je pensais:

Puis-je inverser la matrice du PanZoom et utiliser la transformation de la propriété css dans l'élément draggable avec la matrice oposite?

EDIT: donc .. Je réussi à mettre en ce code:

ui.position.top = Math.round(ui.position.top/zoom); 
ui.position.left = Math.round(ui.position.left/zoom); 

Dans ma fonction qui obtient la position de l'élément maintenant la zone que je dois faire glisser les éléments diminue à mesure que je zoome ..

Probablement je dois utiliser un code similaire dans le div .droppable. mettre à l'échelle le fichier .droppable lorsqu'il met le .wrapper à l'échelle?

EDIT 2: a créé une question sur l'article here.

Answer 1

J'ai donc résolu ce problème avec succès en utilisant:

 var realheight = $(".droppable").eq(0).height() * zoom; 
     var realwidth = $(".droppable").eq(0).width() * zoom ; 

     ui.position.top = ui.position.top/zoom ; 
     ui.position.left = ui.position.left/zoom;  
     ui.position.left - (ui.helper.outerWidth()/2) 

     xpos = (((parseFloat(ui.helper.css("left")) /realwidth) * 100) * zoom) * zoom ; 
     ypos = (((parseFloat(ui.helper.css("top")) /realheight) * 100) * zoom) * zoom ; 

     ui.helper.css({top : ypos+"%", left: xpos+"%"});