javascript - 使用 jquery panzoom 和 jquery 可拖动

Question

所以我有这个.draggable在内部工作的 jquery 项目，.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可能我必须在div中使用类似的代码。在缩放 .wrapper 时缩放 .droppable？

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