Используя jquery panzoom вместе с jquery, перетаскиваемым

Question

Итак, у меня есть этот jquery .draggable предметы, которые работают внутри .droppable и .droppable родитель использует JQuery .panzoom, Существует также изображение для фона ведьма внутри .canvasimg,

Вот дерево моей структуры 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>

Что я имею:

У меня работает зум и draggable работает тоже. Проблема в том, что когда я увеличиваю масштаб, перетаскиваемый объект должен находиться под мышью, но он как бы получает "истинную" позицию или исходную позицию, как вы предпочитаете.

Если я начну свое перетаскивание сверху слева от моего .droppable при увеличении все начинается хорошо, элемент находится под мышью, вот так:

Но когда я пересекаю экран, элемент начинает "уходить" от мыши, чем больше я двигаюсь вправо и вниз, тем больше элемент удаляется от мыши, вот так:

Что я пробовал:

Чтобы реализовать ответ на этот вопрос, но так как я сохраняю позицию через ajax, я не очень уверен, как я могу его использовать, если ответ на этот вопрос находится в следующем коде:

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
};

Я пытался использовать его, но безуспешно.

что я думал:

Могу ли я инвертировать матрицу panzoom и использовать свойство трансформации css в перетаскиваемом элементе с матрицей опозита?

РЕДАКТИРОВАТЬ: Итак.. Я успешно реализовал этот код:

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

В моей функции, которая теперь получает положение элемента, область, которую я должен перетаскивать, уменьшается при увеличении масштаба.

Вероятно, я должен использовать подобный код в .droppable дела. масштабировать.droppable так же, как он масштабирует.wrapper?

РЕДАКТИРОВАТЬ 2: Здесь создан вопрос об элементе.

Answer 1

Так что я успешно решил эту проблему, используя:

        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+"%"});