在 jquery 可拖动的旁边使用 jquery panzoom

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 也可以使用。问题是当我放大时，拖动的项目应该在鼠标下方，但它有点得到 "true" 位置，或者你喜欢的原始位置..

如果我从 .droppable 的左上角开始拖动并放大，它开始正常，元素在鼠标下方，如下所示：

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

我尝试过的：

要实现 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 变换属性吗？

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

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

在 jquery 可拖动的旁边使用 jquery panzoom

Using jquery panzoom alongside jquery draggable

javascript

jquery

jquery-ui

draggable

jquery.panzoom