javascript - 将 jquery panzoom 与 jquery draggable 一起使用

Question

所以我有这个 jquery .draggable 项在 .droppable 中工作，.droppable 父级使用 jquery 。全景缩放。 .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 的左上角开始拖动并放大，它开始正常，元素在鼠标下方，如下所示:

但是当我穿过屏幕时，元素开始“远离”鼠标，我向右和底部移动得越多，元素就越远离鼠标，如下所示:

我尝试过的:

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

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

我的想法:

我可以反转 panzoom 的矩阵并在具有对向矩阵的可拖动项中使用 css transform 属性吗？

编辑: 所以..我成功地实现了这段代码:

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

在我现在获取元素位置的函数中，随着我放大，我必须拖动项目的区域会减少..

可能我必须在 .droppable div 中使用类似的代码。在缩放 .wrapper 时缩放 .droppable？

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