使用jquery泛缩放和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左上角开始拖动，它会启动of，元素就在鼠标下面，如下所示：

但是，当我穿过屏幕时，元素开始“离开”鼠标，我越往右和底部走，元素就越远离鼠标，如下所示：

​

我试过的是：

为了实现this问题的答案，但是由于我通过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
};

我试过用它，但没有成功。

我的想法是：

我能否倒置泛变焦的矩阵，并使用css转换属性在拖放项目与选择粒矩阵？

编辑：所以..。我成功地实现了这个代码：

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

在我的函数中，现在得到元素的位置，当我放大时，我必须拖动的区域缩小了。

可能我必须在.droppable div中使用类似的代码。缩放.droppable，就像它缩放.wrapper一样？

编辑2:创建了一个关于项目here的问题。

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