使用 jquery panzoom 和 jquery 可拖动

Posted 2023-05-07

【中文标题】使用 jquery panzoom 和 jquery 可拖动

【英文标题】：Using jquery panzoom alongside jquery draggable

【发布时间】：2017-07-21 05:55:41

【问题描述】：

所以我有这个 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 的左上角开始拖动并放大，它开始正常，元素在鼠标下方，如下所示：

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

我尝试过的：

要实现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的问题。

【问题讨论】：

我注意到您尚未接受其他问题的任何答案。当答案有帮助时，您可能会考虑这样做。它将增加您的声誉，并奖励那些帮助您的人。您可以通过单击旁边的勾号来接受答案

哦，谢谢你，k Scandrett。我应该这样做的

您的问题回答了吗？如果没有，我会建议也许包装缩放的元素并使包装器可拖动。

.wrapper 用 panzoomer 平移，我确实回答了这个问题但仍然遇到问题，我认为它的区域 .draggable 没有使用 .droppable 的当前大小，我认为它在开始时使用大小，当它缩放时，放置区域在.draggable 中保持不变，但.droppable 改变大小。

【参考方案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+"%");